1. computed
computed是计算属性
- 支持缓存机制，在监听数据没有改变时不会重新计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- 在computed中，属性都有一个get和一个set方法，当数据返回时调用get方法，数据变化时调用set方法
new Vue({
data: {
user: {
email: "123@qq.com",
nickname: "张三",
phone: 123456789
}
},
computed: {
displayName: {
get() {
const user = this.user;
return user.nickname || user.email || user.phone;
},
set(value) {
console.log(value);
this.user.nickname = value
}
}
},
template: `
<div>
{{displayName}}
<button @click="add">set</button>
</div>
`,
methods: {
add() {
console.log("add");
this.displayName = "李四"
}
}
}).$mount("#app");
computed中的displayName属性调用了get方法，通过add按钮调用set，修改姓名为“李四”，当修改的值是相同时computed不会重新计算
2.watch
watch是监听属性，用于监听数据变化
- watch不支持缓存，不论监听的数据是否重复都会被监听到
- watch支持异步
- 监听的函数接收两个参数，第一个参数是最新的值(newVal),第二个参数是更新前的值(oldVal)
- 当数据变化时，watch提供了两个选项
immediate: 组件加载立即触发回调函数执行，默认值为false，true表示设置监听后立即调用, immediate 控制是否在第一次渲染是执行这个函数
deep: 深度监听object的属性，默认值为false, deep 控制是否要看这个对象里面的属性变化
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");
3.总结
computed是vue提供的计算属性,便于多个数据的整合和计算
watch是vue提供的监听属性,主要是用于监听一个属性的变化记录,(并且监听过程中消耗的资源相对较大)
