在vue.js官方文档中看到computed和watch获取全名的一个例子:
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
计算属性是计算属性,侦听器watch是侦听器watch。
计算属性
顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。
另外,计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
而侦听器watch是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数。
区别:
- computed会产生新的属性,产生的新的属性与data中原有的属性功能没有区别.用法一样;watch不会产生新的属性.
- 在写法上:computed返回state处理后结果,watch是赋值行为,修改state。
- computed会在vue实例化过程中执行一次(前提是这个计算属性在template有用到,如果没有用到,这个computed永远不会执行,包括vue初始化时);watch在vue初始化时,不会执行.
开发时选用哪一个:想得到某个属性变化时产生的结果用computed.某个属性变化时产生的影响用watch.一个侧重结果(值),一个侧重影响(过程).