简单来说就是,computed适合用来操作单个属性,watch适合用来做开销比较大的操作例如异步操作/重新获取数据等
一、computed
computed是基于getter封装的函数方法,触发computed更新需要依赖的属性发生改变才会触发computed函数
计算属性使得 属性 更容易加上逻辑
<p>Reversed message: "{
{ reversedMessage }}"</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter<默认getter>
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('') //
}
}
})
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作 property vm.reversedMessage 的 getter 函数:
console.log(vm.reversedMessage) // => ‘olleH’
vm.message = ‘Goodbye’
console.log(vm.reversedMessage) // => ‘eybdooG’
二、用方法代替computed
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
<p>Reversed message: "{
{ reversedMessage() }}"<