计算属性与监听属性
计算属性:watch和computed的区别computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 。watch:当一条数据影响多条数据的时候就要用watch。下面展示一些 内联代码片。new Vue({data: {n: 0,obj: {a: "a"}},template: `<div><button @click="n +
·
计算属性:watch和computed的区别
computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 。
watch:当一条数据影响多条数据的时候就要用watch。
下面展示一些 内联代码片
。
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div>
<button @click="n += 1">n+1</button>
<button @click="obj.a += 'hi'">obj.a + 'hi'</button>
<button @click="obj = {a:'a'}">obj = 新对象</button>
</div>
`,
watch: {
n() {
console.log("n 变了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 变了")
},
deep: true // 该属性设定在任何被侦听的对象的 property 改变时都要执行 handler 的回调,不论其被嵌套多深
},
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 变了")
},
immediate: true // 该属性设定该回调将会在侦听开始之后被立即调用
}
}
}).$mount("#app");
注意:不应该使用箭头函数来定义watcher函数,因为箭头函数没有this,因为他的this会继承它的父。
vm.$watch() 的用法和 watch 回调类似
下面展示一些 内联代码片
。
vm.$watch('data属性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 变了");
},{deep: true, immediate: true})
当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行。
总结:如果一个数据需要经过复杂计算就用 computed
如果一个数据需要被监听并且对数据做一些操作就用 watch
更多推荐
已为社区贡献1条内容
所有评论(0)