在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和computed这两个属性，既然都是数值改变触发改变的属性，他们之间又有什么异同呢？笔者将在接下来进行解析
computed:计算属性
通过属性计算而得来的属性
1. get用法
data: {
firstName: 'Liu',
lastName: 'lu'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值
2.get和set用法
data: {
firstName: 'Liu',
lastName: 'lu'
},
computed: {
fullName：{
get(){//回调函数 当需要读取当前属性值时执行，根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
//val就是fullName的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}
注意：
1、computed内部的函数名称可以随意编写
2、computed内部的函数必须通过return的方式将结果进行返回，最好不要在内部进行赋值操作
3、虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加()
4、只要函数内部所依赖的属性发生了改变，那么这个函数就会自己调用
5、如果函数内部所依赖的属性没有发生改变的时候computed会从缓存中读取结果
总结：computed中的方法都是依赖于Vue中data里面的属性，如果属性发生了改变那么computed中所对应的函数就会去执行
使用的场景：当多个属性影响一个属性的时候我们就需要用到computed，如下图
watch:属性监听
作用：监听data中属性的变化 当data中的属性发生了改变后，那么watch中相对应的函数就会执行
1.示例
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.监听简单数据类型
data(){
return{
'first':2
}
},
watch:{
first(){
console.log(this.first)
}
}
3.监听对象（数组）需用深度监听
data(){
return{
'first':{
second:0
}
}
},
watch:{
secondChange:{
handler(oldVal,newVal){
console.log(oldVal)
console.log(newVal)
},
deep:true
}
}
console.log打印的结果,发现oldVal和newVal值是一样的,说明深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化（地址没有被改变，原先的数据被覆盖）
注意事项：
1、watch中的函数名称必须是所依赖data中的属性名称
2、watch中的函数是不需要调用的，只要函数所依赖的属性发生了改变 那么相对应的函数就会执行
3、watch中的函数会有2个参数 一个是新值，一个是旧值
4、watch默认情况下无法监听对象的改变，如果需要进行监听则需要进行深度监听 深度监听需要配置handler函数以及deep为true。(因为它只会监听对象的地址是否发生了改变，而值是不会监听的)
5、watch默认情况下第一次的时候不会去做监听，如果需要在第一次加载的时候也需要去做监听的话需要设置immediate:true
6、watch在特殊情况下是无法监听到数组的变化
- 通过下标来更改数组中的数据
- 通过length来改变数组的长度
解决方案：
- 通过Vue实例方法
set(object,key/index,value);
this.$set(this.arr,0,100);
- 通过splice来数组清空 $delete(object,key/index)
this.$delete(this.arr,0)
7、深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用
总结：
computed常用于值的计算，如简化tempalte里面{{}}计算和处理props或$emit的传值，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch常用来观察动作，听props，$emit或本组件的值执行异步操作,页面重新渲染时值不变化也会执行
