一、总述
computed和watch都是vue框架中的用于监听数据变化的属性。
二、computed计算属性
1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加（）
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取
示例
computed:{
Total(){
let price = 0;
for (let i = 0;i<this.tableData.length;i++) {
price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
}
this.detailedSend.total = price
return price;
},
},
三、watch监听
1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数，前者是newVal，后者是oldVal
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
5、immediate:true 页面首次加载的时候做一次监听
示例
watch: {
keyword () {
const result = []
this.jsonData.forEach(val => {
if (val.name.indexOf(this.keyword) > -1) {
result.push(val.name)
}
});
this.cityList = result
}
},
四、区别
1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188408.html
