深入浅析Vue.js中 computed和methods不同机制


Posted in Javascript onMarch 22, 2018

在vue.js中,有methods和computed两种方式来动态当作方法来用的

1.首先最明显的不同 就是调用的时候,methods要加上()

2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。

而使用 methods ,在重新渲染的时候,函数总会重新调用执行

为了方便理解,先上一段源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  </head>
  <body>
    <div class="test">  <!--computed计算属性-->
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <hr />      <!--横线分割-->
</div>
    <div class="test2">  <!--methods方法,注意new()加了括号-->
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
    </div>
  </body>
  <script type="text/javascript">
    var myVue = new Vue({
      el: ".test",
      computed: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {   //延时
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    });
    var vue2 = new Vue({
      el: '.test2',
      methods: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    })
  </script>
</html>

运行结果如上,可以看出computed计算属性的话,每次进入页面将一直沿用第一次的信息,不会再触发now,这就是依赖缓存。(有延时的情况下 多次输出时间相同)

那什么是相关依赖发生改变时才会重新取值呢 比方说reversedMessage function()计算属性中调用了message变量

就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

而methods是实时的,在重新渲染时,函数总会重新调用执行,不会缓存,(多次输出时间不同)

可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :所以其实computed也是可以传参的。

ps:下面看下vue计算属性computed和methods的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。
computed称为计算属性,顾名思义,计算就要返回一个计算的结果,所以,当我们要处理大量的逻辑,但是最后要取得最后的结果的时候可以用computed;
简单示例:
要求:
<input type="text v-model="num1"><input type="text v-model="num2">
现在要返回num1和num2的和;
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    computed:{  
        result:function(){
            return this.num1 + this.num2  
            // 计算属性必须有一个返回值
        }
    }
   })
</script>
methods:是方法的意思,在js中,我们把一些函数叫做方法,一般情况下,要触发这个方法就要执行,要执行就要有一个源来触发,所以就需要一个事件源。这是和computed的一点不同之处;
methods的示例:
要求:
<\button @click="do()">点击弹出<\/button>
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    methods:{  
        do:function(){
           alert('ok')
           //这里根据情况,可以返回有返回值也可以没有返回值。
        }
    }
   })
</script>
对比computed 和 methods:
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。

总结

以上所述是小编给大家介绍的Vue.js中 computed和methods不同机制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JS简单随机数生成方法
Sep 05 Javascript
javascript学习之json入门
Dec 22 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
Java设计中的Builder模式的介绍
Mar 22 #Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 #Javascript
收集前端面试题之url、href、src
Mar 22 #Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 #Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 #Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
You might like
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
javascript每日必学之多态
2016/02/23 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
详解Angular5 服务端渲染实战
2018/01/04 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
python脚本监控docker容器
2016/04/27 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
运动会广播稿400字
2014/01/25 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
实习证明格式范文
2014/10/14 职场文书
交流会主持词
2015/07/02 职场文书
2016高考寄语集锦
2015/12/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python