深入浅析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 克隆数组最简单的方法
Feb 12 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
jquery自定义表格样式
Nov 23 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
js实现简单进度条效果
Mar 25 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
使用Python的内建模块collections的教程
2015/04/28 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
selenium如何定位span元素的实现
2021/01/13 Python
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
C语言面试题
2013/05/19 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
教导处工作制度
2014/01/18 职场文书
《落花生》教学反思
2014/02/25 职场文书
七一党日活动总结
2014/07/08 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
六一活动主持词
2015/06/30 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
创业计划书之物流运送
2019/09/17 职场文书
golang定时器
2022/04/14 Golang