methods和computed和watch的联系和区别
一.methods和computedcomputed是计算属性,methods是方法。html:p>Reversedmessage: "{{ reversedMessage() }}"p>js:1.var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {
一.methods和computed
computed是计算属性,methods是方法。
html:
<p>Reversed message: "{{ reversedMessage() }}"</p>
js:
1.
2.var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// a computed getterreversedMessage: function () {// `this` points to the vm instancereturn this.message.split( '').reverse().join( '')}}})
var vm = new Vue({el: '#example',data: {message: 'Hello'},methods: {reversedMessage: function () {return this.message.split( '').reverse().join( '')}}})
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式确实是相同的。
不同的是computed计算属性是基于它们的依赖进行缓存的。计算属性computed只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message
还没有发生改变,多次访问 reversedMessage
计算属性会立即返回之前的计算结果,而不必再次执行函数。而对于method ,只要发生重新渲染,method 调用总会执行该函数。
当有一个性能开销比较大的的计算属性 A ,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A ,这时候,我们就需要缓存!
但是,缓存也有自己的缺点:
也同样意味着下面的计算属性将不再更新,因为 Date.now()
不是响应式依赖:
|
总之:数据量大,需要缓存的时候用computed;每次确实需要重新加载,不需要缓存时用methods
二.computed和watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:watch 属性。
当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch
——特别是如果你之前使用过 AngularJS。然而,更好的想法是使用 computed 属性而不是命令式的 watch
回调。细想一下这个例子:
|
|
上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较:
|
更多推荐
所有评论(0)