深入浅析Vue.js中 computed和methods不同机制
发布时间：2020-12-17 02:29:32 所属栏目：百科 来源：网络整理
导读：在vue.js中，有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候，methods要加上（） 2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新
|
在vue.js中，有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候，methods要加上（） 2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行 为了方便理解，先上一段源码
title
运行结果如上，可以看出computed计算属性的话，每次进入页面将一直沿用第一次的信息，不会再触发now，这就是依赖缓存。（有延时的情况下 多次输出时间相同） 那什么是相关依赖发生改变时才会重新取值呢 比方说reversedMessage function（）计算属性中调用了message变量 就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 而methods是实时的，在重新渲染时，函数总会重新调用执行，不会缓存，（多次输出时间不同） 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。 computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：所以其实computed也是可以传参的。 ps：下面看下vue计算属性computed和methods的区别
new Vue({
el:"#box",data:{
num1:0,num2:0
}
computed:{
result:function(){
return this.num1 + this.num2
// 计算属性必须有一个返回值
}
}
})
methods：是方法的意思，在js中，我们把一些函数叫做方法，一般情况下，要触发这个方法就要执行，要执行就要有一个源来触发，所以就需要一个事件源。这是和computed的一点不同之处；
methods的示例：
要求：
总结以上所述是小编给大家介绍的Vue.js中 computed和methods不同机制。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |