一、看官方文档关于computed和watch的例子
1.关于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
}
}
})
2.关于computed的例子
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
二、两者区别
1.计算属性是计算属性,侦听器watch是侦听器watch。计算属性顾名思义就是通过其他变量计算得来的另一个属性,fullName在它所依赖firstName,lastName这两个变量变化时重新计算自己的值。注意:计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变,多次访问 fullName计算属性会立即返回之前的计算结果,而不必再次执行函数。
2.侦听器watch是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数
3.从属性名上,computed
是计算属性,也就是依赖其它的属性计算所得出最后的值。watch
是去监听一个值的变化,然后执行相对应的函数。
4、从实现上
一、computed
的值在getter
执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed
的值时才会重新调用对应的getter
来计算。
二、watch
在每次监听的值变化时,都会执行回调。其实从这一点来看,都是在依赖的值变化之后,去执行回调。
三、两者都是在依赖值变化之后,去执行回调。如果一个值依赖多个属性(多对一),用computed
肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch
更加方便一些。
四、watch
的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed
通常就是简单的计算。watch
和computed
并没有哪个更底层,watch
内部调用的是vm.$watch
,它们的共同之处就是每个定义的属性都单独建立了一个Watcher
对象。