computed 与 watch 作为 vue 的两大监听器，在vue中是必不可少的。
那么他们有什么区别呢 ？
1. 计算属性 computed
- 简单的应用：
<div>{{ fullName}}</div>
new Vue({
data() {
return{
name: 'zhudying'
}
},
computed: {
fullName({name}) { // 接受参数，vue实例对象，可以将data中的name直接结构出来
let username = name
return '姓名：'+ username
}
}
})
这样就避免了在template里面直接计算{{this.firstNum + this.lastNum}}，因为在模版中放入太多声明式的逻辑会让模板本身过重，尤其当在页面中使用大量复杂的逻辑表达式处理数据时，会对页面的可维护性造成很大的影响，而computed的设计初衷也正是用于解决此类问题。
- computed 中的 get 和 set 方法：
<div>{{ fullName}}</div>
<button @click="chooseData">改变Num</button>
new Vue({
data() {
return{
name: 'zhudying'
}
},
computed: {
fullName: {
// getter
get() {
return "姓名：" + this.name;
},
// setter
set(newValue) {
console.log(newValue, "newValue"); // zhu
this.name = newValue;
}
}
}，
methods:{
chooseData(){
this.name= ‘zhu’
}
}
})
- computed 特性：
- 计算属性是基于它们的响应式依赖进行缓存的，页面重新渲染值不会变化，计算属性会立即返回之前的计算结果，除非依赖的响应式属性变化才会重新计算。
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
- 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
2. 侦听属性watch：
- 简单的应用：
new Vue({
el: '#root',
data: {
obj:{
name: 'zhudying'
}
},
watch: {
obj: {
handler(newName, oldName) {
// newName 变化后的新值，oldName 变化前的旧值
console.log(newName,oldName)
},
// 对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。
// 这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true
deep:true,
// 最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算
// 这时添加属性 immediate，值为 true 时，会在一开始执行
immediate: true
}
}
})
watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择。
- 不支持缓存
- 当数据变化，会触发相应的操作
- watch支持异步操作
- watch之
deep：deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
优化： 可以直接监听 对象中的某一属性，如：obj.name
