深入浅析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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue.extend与vue.component的区别和联系
Sep 19 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
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
php实现生成验证码实例分享
2016/04/10 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
总裁办公室主任职责
2014/01/02 职场文书
成语的广告词
2014/03/19 职场文书
2015年采购员工作总结
2015/04/27 职场文书
小型婚礼主持词
2015/06/30 职场文书