computed 能完成的功能，watch 都可以完成。
watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作。
能用 computed 完成的尽量用 computed 去完成，不能用 computed 完成的再用 watch 去完成。
计算属性实现数据处理：
<div id="APP"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名: <span>{{fullName}}</span> </div>
const vm = new Vue({ el: "#APP", data(){ return { firstName: "张", lastName: "三" } }, computed:{ fullName(){ return this.firstName + '-' + this.lastName; } }, });
总结：计算属性适合在多个数据影响一个数据时，使用比较简单。以上功能用计算属性实现就非常方便。
侦听属性实现数据处理：
侦听属性想要实现以上功能，还需要再新建一个变量，因为侦听属性监听的数据必须存在。另外侦听属性还需要同时监听 firstName 和 lastName 这两个变量才能实现该功能。
<div id="APP"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model="lastName"> <br/><br/> 全名: <span>{{fullName}}</span> </div>
const vm = new Vue({ el: "#APP", data(){ return { firstName: "张", lastName: "三", fullName: "张-三" } }, watch:{ firstName(newValue){ this.fullName = newValue + '-' + this.lastName; }, lastName(newValue){ this.fullName = this.firstName + '-' + newValue; } }, });
总结：侦听属性适合在一个数据影响多个数据时，使用比较简单。以上功能用侦听属性实现就会非常麻烦。
原创作者：吴小糖
创作时间：2023.5.31
