深入浅析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 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 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中的string类型使用说明
2010/07/27 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
Python中join和split用法实例
2015/04/14 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python版名片管理系统
2018/11/30 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
电工工作职责范本
2014/02/22 职场文书
买房委托公证书
2014/04/08 职场文书
商务日语专业自荐信
2014/04/17 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
农业生产宣传标语
2014/10/08 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB