一、watch
1、介绍:
主要用于监控 Vue 实例的变化,监控的变量必须在data里面声明,可以监控一个变量或者一个对象。
通过 vm 对象的$watch
或watch
配置来监视指定的属性,当属性变化时,回调函数自动调用,在函数内部进行计算,回调函数得到的参数为新值和旧值。
2、实例:
input输入框:
<template>
<div>
<label>医疗机构:<input type="text" placeholder="请输入医疗机构" v-model="hospitalName"></label>
</div>
</template>
<script>
export default {
data() {
return {
hospitalName: ""
}
},
watch:{
// 监听hospitalName
hospitalName(value){
console.log(`watch监视到hospitalName发生改变:${value}`);
//更新hospitalName
this.hospitalName = value
}
},
}
</script>
注:如果有一个搜索按钮,点击按钮的时候才会进行数据的响应和操作,这时最好使用computed。
select选择框:
<template>
<div>
<label>支付方式:</label>
<select v-model="modeSelected">
<option :value="mode.name" v-for="mode in modeList" >{{mode.name}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
modeList:[
{
id: '0',
name: '全部'
},
{
id: '1',
name: '支付宝'
},
{
id: '2',
name: '微信'
},
{
id: '3',
name: '银联'
}
],
modeSelected: '',
}
},
watch:{
// 监听modeSelected
modeSelected(value,oldvalue){
console.log(`watch监视到modeSelected新值:${value}`);
console.log(`watch监视到modeSelected旧值:${oldvalue}`);
//更新modeSelected
this.modeSelected = value
}
},
created() {
//如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
this.modeSelected = this.modeList[0].name;
}
}
</script>
3、使用场景:
watch
一般用于监控路由、搜索框之类的,需要不断地响应数据的变化,适合一个数据影响多个数据的场景。
二、computed
1、介绍:
减少模板中的计算逻辑,监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。
在页面中使用{{方法名}}
来显示计算的结果,通过getter/setter
实现对属性数据的显示和监视。
computed比较适合对多个变量或者对象进行处理后统一返回一个结果值,也就是数多个变量中的某一个值发生了变化,则我们监控的这个值也就会发生变化。
2、实例:
<template>
<div>
<label>姓名:{{Name}}</label>
</div>
</template>
<script>
export default {
data() {
return {
firstName:"Fan",
lastName:"JunYang"
}
},
computed:{
Name(){
return this.firstName + " " + this.lastName
}
}
}
</script>
注:当改变其中一个值的时候,另一个值并不会进行重新计算,从而减少了开销。
3、使用场景:
computed擅长使用的场景:一个数据受多个数据影响。
总结
能用computed的地方,尽可能使用computed。
computed是计算一个新的属性,并将该属性挂载到vm上,而watch是监听已经存在且挂载在vm上的数据,所以用watch同样可以监听computed计算属性的变化。
computed具有缓存性,只有当依赖变化后,第一次访问computed属性,才会计算新的值,而watch则是当数据发生变化便会调用执行函数。
从使用场景上来看,computed的适用一个数据被多个数据影响,而watch适用一个数据影响多个数据。