春招冲刺（九）：计算属性和监视属性总结

计算属性和监视属性总结

Q1：计算属性

姓：<input type="text" v-model="firstName"><br><br>
名：<input type="text" v-model="lastName"><br><br>
姓名：<span>{{fullName}}</span>

//写法1：完整版
computed:{fullName:{get(){return this.firstName + '-' + this.lastName},set(value){const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}
}

//写法2：函数版（简写）
computed:{fullName(){return this.firstName + '-' + this.lastName}}

总结：

• 定义：要用的属性不存在，需要通过已有属性计算得来。
• 原理：底层借助了Objcet.defineproperty()方法提供的getter和setter。
• get函数什么时候执行？
  • 初次读取时会执行一次
  • 当依赖的数据发生改变时会被再次调用
• 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
• 备注：
  • 计算属性最终会出现在vm上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • 如果计算属性确定不考虑修改，可以使用计算属性的简写形式

Q2：监视属性

<h2>今天天气好{{info}}!</h2>
<button @click="changeWeather">点击切换天气</button>

// 写法1：
new Vue({el:'#root', data:{ isHot:true,},// 根据isHot的bool值决定显示什么文字computed:{info(){return this.isHot ? '炎热' : '凉爽' }},// 按钮点击改变isHot的值methods:{changeWeather(){this.isHot = !this.isHot}},// 监视isHot的值，要是改变了就输出watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用？当isHot发生改变时handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}}})

总结：

• 当被监视的属性变化时，回调函数自动调用，进行相关操作
• 监视的属性必须存在，才能进行监视
• 监视有两种写法：
• 创建Vue时传入watch配置

通过vm.$watch监视

// 写法2：
vm.$watch('isHot',{immediate:true,handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}
})

// 写法3：简写。如果监视属性除了handler没有其他配置项的话，可以进行简写。
isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)
}

深度监视

<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>

new Vue({el:'#root', data:{ isHot:true,numbers:{a:1,b:1,}},watch:{//监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了')}},//监视多级结构中某个属性的变化'numbers.a':{handler(){console.log('a被改变了')}} }})

总结：

• Vue中的watch默认不监测对象内部值的改变（一层）
• 在watch中配置deep:true可以监测对象内部值的改变（多层）

Q3：computed和watch的不同

• 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
• 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
• 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
• computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
  https://blog.csdn.net/web22050702/article/details/125530363

Q4：运用场景

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

参考链接

• https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe716e00555e18aa34896ffa7a7&chksm=be5bc8cc892c41daaefa76d5747d5e1eccd2934c3c178e70e16702d729aa2e40409621ffa137&scene=27