一、computed 介绍
computed 用来监控本人定义的变量，该变量在 data 内没有申明，间接在 computed 外面定义，页面上可间接应用。
// 根底应用
{{msg}}
<input v-model="name" />
// 计算属性
computed:{msg:function(){return this.name}
}
在输入框中，扭转 name 值得时候，msg 也会跟着扭转。这是因为 computed 监听本人的属性 msg，发现 name 一旦变动，msg 立马会更新。
留神：msg 不可在 data 中定义，否则会报错。
1.1、get 和 set 用法
<input v-model="full" ><br>
<input v-model="first" > <br>
<input v-model="second" >
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{
full:{get(){ // 回调函数 当须要读取以后属性值是执行，依据相干数据计算并返回以后属性的值
return this.first + ' ' + this.second
},
set(val){ // 监督以后属性值的变动，当属性值发生变化时执行，更新相干的属性数据
let names = val.split(' ')
this.first = names[0]
this.second = names[1]
}
}
}
get 办法：first 和 second 扭转时，会调用 get 办法，更新 full 的值。
set 办法：批改 full 的值时，会调用 set 办法，val 是 full 的最新值。
1.2、计算属性缓存
咱们通过办法，拼接数据，也能够实现该成果，代码如下。
<div> {{full() }} </div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
methods:{full(){return this.first + ' ' + this.second}
},
一个页面内，数据有可能屡次应用，咱们把 computed 和 method 两个办法放一起实现，并把这个数据在页面内屡次援用，试看以下成果。
<div>
computed 计算值：{{full}} {{full}} {{full}} {{full}}
</div>
<div>
methods 计算值：{{fullt}} {{fullt}} {{fullt}} {{fullt}}
</div>
data(){
return{
first:'美女',
second:'姐姐'
}
},
computed:{full:function(){console.log('computed')
return this.first + ' ' + this.second
}
},
methods:{fullt(){console.log('办法')
return this.first + ' ' + this.second
}
}
运行后果为：
依据后果，咱们不难发现，依据办法获取到的数据，应用几次就须要从新计算几次，但计算属性不是，而是基于它们的响应式依赖进行缓存的，之后依赖属性值产生扭转的时候，才会从新计算。因为它计算次数少，所以性能更高些。
二、watch 介绍
watch 是监测 Vue 实例上的数据变动，艰深地讲，就是检测 data 内申明的数据。不仅能够监测简略数据，还能够监测对象或对象属性。
Demo1：监测简略数据
<input v-model="first" > <br>
data(){
return{first:'美女',}
},
watch:{first( newVal , oldVal){console.log('newVal',newVal) // first 的最新值
console.log('oldVal',oldVal) // first 上一个值
}
},
// 批改 first 的值的时候，立马会打印最新值
Demo2：监测对象
监听对象的时候，须要应用深度监听。
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{
per:{handler(oldVal,newVal){console.log('newVal',newVal)
console.log('oldVal',oldVal)
},
deep:true,
}
},
批改 per.name 的时候，发现 newVal 和 oldVal 的值是一样的，是因为他们存储的指针指向的是同一个中央，所以深度监听尽管能够监听到对象的变动，然而无奈监听到具体的是哪个属性发生变化了。
Demo3：监听对象的单个属性
// 办法 1：间接援用对象的属性
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{'per.name':function(newVal,oldVal){console.log('newVal->',newVal)
console.log('oldVal->',oldVal)
}
},
也能够借助 computed 作为两头转换，如下：
// 办法 2：借助 computed
<input v-model="per.name">
data(){
return{
per:{
name:'倩倩',
age:'18'
}
}
},
watch:{perName(){console.log('name 扭转了')
}
},
computed:{perName:function(){return this.per.name}
},
Demo4：监听 props 组件传过来的值
props:{mm:String},
// 不应用 immediate
watch:{mm(newV,oldV){console.log('newV',newV)
console.log('oldV',oldV)
}
}
// 应用 immediate
watch:{
mm:{
immediate:true,
handler(newV,oldV){console.log('newV',newV)
console.log('oldV',oldV)
}
}
不应用 immediate 时，第一次加载页面时，watch 监听的 mm 中的打印并没有执行。
应用 immediate 时，第一次加载时也会打印后果：newV 11 oldV undefined。
immediate 次要作用就是组件加载时，会立刻触发回调函数。参考 前端 vue 面试题具体解答
三、两者区别
3.1、对于 computed
- computed 监控的数据在 data 中没有申明
- computed 不反对异步，当 computed 中有异步操作时，无奈监听数据的变动
- computed 具备缓存，页面从新渲染，值不变时，会间接返回之前的计算结果，不会从新计算
- 如果一个属性是由其余属性计算而来的，这个属性依赖其余属性，个别应用 computed
- computed 计算属性值是函数时，默认应用 get 办法。如果属性值是属性值时，属性有一个 get 和 set 办法，当数据发生变化时会调用 set 办法。
computed:{
// 属性值为函数
perName:function(){return this.per.name},
// 属性值为属性值
full:{get(){ },
set(val){}}
},
3.2、对于 watch
- 监测的数据必须在 data 中申明或 props 中数据
- 反对异步操作
- 没有缓存，页面从新渲染时，值不扭转时也会执行
- 当一个属性值发生变化时，就须要执行相应的操作
- 监听数据发生变化时，会触发其余操作，函数有两个参数：
immediate：组件加载立刻触发回调函数
deep：深度监听，次要针对简单数据，如监听对象时，增加深度监听，任意的属性值扭转都会触发。留神：对象增加深度监听之后，输入的新旧值是一样的。computed 页面从新渲染时，不会反复计算，而 watch 会从新计算，所以 computed 性能更高些。
四、利用场景
当须要进行数值计算，并且依赖于其它数据时，应该应用 computed，因为能够利用 computed 的缓存个性，防止每次获取值时都要从新计算。
当须要在数据变动时执行异步操作或开销较大的操作时，应该应用 watch，computed 不反对异步。如果须要限度执行操作的频率，可借助 computed 作为中间状态。