Watch with computed

都是对数据进行监听，能用computer就不用watch
使用场景：
watch：处理比较复杂的业务逻辑以及异步操作
computer：简单的数据同步计算

Watch: {
obj: function ( newV, oldV) {
等同于handler写法，immediate为false
console.log(‘第一次不会执行handler’);
}
obj (newV, oldV) {
等同于handler写法，immediate为false
console.log(‘第一次不会执行handler’);
}
obj: {
handler () {
console.log(‘immediate：会立即执行handler’);
},
immediate: true,
}
obj: {
handler () {
console.log(‘deep： 深度遍历属性，进行深度监听，会触发handler’);
},
deep: true
}
‘obj.a’: {
handler () {
console.log(‘字符串形式：减少深层绑定监听器开销’);
},
deep: true
}

}

computed: {
…mapState(‘common’, {
contractFileList: state => state.contractFileList,
}),
…mapState({
addressOrderPageList: state => state.addressOrder.addressOrderPageList,
}),
changeMessage() {
// message 变化而变化
return this.message + ‘world’;
},
changeMessage: {
get () {
// message 变化而变化
return this.message + ‘world’;
},
set () {}
},
didiFamily:{
//getter
get:function(){
return this.didi + ‘ ‘ + this.family
},
//setter
set:function(newValue){
// 由于该计算属性被赋值(在其他地方赋值,比如mounted,赋值才会触发setter)，将被调用
console.log(newValue)
this.didi = 123
this.family = 456
}
},
now:{
cache: false, // 依赖实时的非观察数据属性（如date）时，cache为false可以实现实时变化
get:function(){
// 计算属性是基于响应式依赖进行缓存的，这意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖
return Date.now()
}
}
},