在vue的项目中，我们时常会需要对data的改变做出处理，这时候就需要用到watch和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，如下图
image.png
作用：监听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或本组件的值执行异步操作,页面重新渲染时值不变化也会执行
