methods 适合业务逻辑处理,不会缓存、每次都重新计算属性
watch 适合监听单个数据。watch监听的是data中定义的变量,当该变量变化时,会触发watch即当被监视的属性变化时,回调函数自动调用,进行相关操作。
computed适合监听多个数据,可以缓存计算的值,方便下次使用。
计算属性( computed)
若模板内的表达式放入过多的逻辑会然模板过重且难以维护,故对于复杂的逻辑,都应采用计算属性
如下例所示
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性缓存(computed)VS方法( methods)
在表达式调用方法也可以达到相同的效果,如下所示:
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
方法每当重新触发渲染时,调用方法将总会再次执行函数。但是计算属性是基于它们的响应式依赖进行缓存的。只有响应式依赖发生改变时它们才会重新求值。即message的值只要不改变,多次访问reverseMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。
计算属性( computed)VS侦听属性( watch)
侦听属性可以用来观察和响应Vue实例上的数据变动。两种写法:1.new Vue时传入watch配置。2.通过vm.$watch监视。
computed能完成功能,watch都能完成,但是watch能完成的功能,computed不一定能完成,如watch可以进行异步操作。(所有被Vue管理的函数,最好写成普通函数、这样this的指向才是vm或者组件实例;所有不被Vue所管理的函数如定时器的回调函数、ajax的回调函数,最好写成箭头函数,这样this的指向才是vm或组件实例对象)
计算属性默认只有getter,不过在需要时也可以提供一个setter
computed: {
fullName: {
// getter 当有人读取fullName时,get会被调用,其值为fullName的值,初次读取fullName与所依赖的数据发生改变是调用get
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。