脚本宝典收集整理的这篇文章主要介绍了Vue.js中 computed 和 methods 的区别,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
官方文档中已经有对其的解释了,在这里把我的理解记录一下。
computed
的使用场景HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护,都应当把相关逻辑放入计算属性。
比如这种
<div id="root">
<p>Reversed message: "{{ message.split('').reverse().join('') }}"</p>
</div>
在这个地方,模板不再是简单的声明式逻辑。这里是想要显示变量 message
的翻转字符串,而这种包含复杂逻辑处理的表达式,都应当使用计算属性。
computed
和 methods
的区别这意味着在HTML的插值
里
{{reversedMessageComputed}}
()
来调用,如 {{reversedNameMethod()}}
,否则视图中会渲染出如下内容function () { [native code] }
这里我引用一下官方文档的说明
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
<!-- html -->
<div id="root">
<p>Reversed message: "{{ reversedNameMethod() }}"</p>
<p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>
// javascript
var vm = new Vue({
el: '#root',
data: {
name: 'Alex',
message: 'Hello'
},
methods: {
reversedNameMethod: function () {
return this.name.split('').reverse().join('')
}
},
computed: {
// 计算属性的 getter
reversedMessageComputed: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
上面的例子中,缓存意味着只要 message
还没有发生改变,多次访问 reversedMessageComputed
计算属性会立即返回之前的计算结果,而不必再次执行函数。而 reversedNameMethod()
方法,每次调用都会重新执行函数。
但同时需要注意,这也同样意味着下面的计算属性将不再更新,因为 Date.now()
不是响应式依赖:
// javascript
computed: {
now: function () {
return Date.now()
}
}
now
的值将在Vue实例化时生成,并且不再改变。
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
computed
和 methods
不可以重名
methods
和 data
里的东西,全部代理到Vue生成的对象中,这会将computed中重名属性覆盖以上是脚本宝典为你收集整理的Vue.js中 computed 和 methods 的区别全部内容,希望文章能够帮你解决Vue.js中 computed 和 methods 的区别所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。