1.computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的,当依赖数据发生变化时,依赖此数据的相关数据会自动变化
2.computed处理场景:一个数据受多个数据的影响;watch处理场景:一个数据影响多个数据
基础的使用场景就不多做介绍了,主要根据常见实际业务需求来展示computed的使用优势和对wantch的谨慎使用
场景(computed):有一个样式固定的盒子A,接口返回两个参数(值0或1),不同的组合会有对应的文案来显示在A里面
<div>{{getAlertText}}</div>
data() {
return {
alertText: '',
};
},
computed: {
getAlertText() {
let text = {
'0,0':'为了您的账户安全,请先完成实名认证,并设置资金密码',
'1,0':'为了您的账户安全,请先设置资金密码',
'0,1':'为了您的账户安全,请先完成实名认证',
};
return text[this.alertText];
}
},
methods: {
preCheckAccount() {
this.$_http.preCheckAccount().then(res => {
if (res.status !== 0) {
return this.$message.error(res.msg);
}
let {isKyc,hasPayPwd} = res.dataWrapper.preCheck;
let arr = [isKyc, hasPayPwd];
this.alertText = arr.join(',');
});
},
},
created() {
this.preCheckAccount();
},
场景(watch):父组件传递props异步数据到子组件
对于这个问题一开始有两种方案来解决1.v-if和created 2.watch和methods
最后选择使用第一种方案
建议尽量减少watch的使用,尤其是deep watch
当使用deep watch的时候(监听器会给对象的所有属性加上监听器,增大性能开销。