computed
computed适用于动态计算data里的属性值，必须加return，不能对data里的属性进行赋值，当无变化时会先从缓存里读取。
使用场景：当一个值受多个属性影响的时候
computed: {
btnText(){
return this.totalCount !== 0 ? `${
this.totalCount}s`: "获取验证码"
}
}
有时也可以用get与set
computed: {
list: {
get() {
return this.$store.state.list
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
watch
watch是监听data里的值的变化，当data中的属性发生改变的时候，watch中的函数就会执行，有两个参数，前者是newVal，后者是oldVal。当监听引用类型数据的变化，需要进行深度监听（用handler + deep的方式进行深度监听。immediate:true 页面首次加载的时候做一次监听。
使用场景：当一条数据的更改影响到多条数据的时候
watch: {
//a,b,c,d为data里的数据名
a(newVal, oldVal) {
console.log(newVal, oldVal)
},
// 方法名
b: 'someMethod',
c: {
handler(newVal, oldVal) {
},
deep: true // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深,一般用于监听对象
},
d: {
handler: 'someMethod',
immediate: true // 该回调将会在侦听开始之后被立即调用
},
},
如何监听多个值的变化?
watch需结合computed使用
computed: {
info() {
const {
password, userCode } = this
return {
password,
userCode
}
},
//直接对一个对象尽行深度接听多个属性值
obj(){
return JSON.parse(JSON.stringify(object))
}
},
watch:{
info:{
handler: function(newval , oldval) {
if(newval.password && newval.userCode){
this.sign = true
}else{
this.sign = false
}
},
deep:true
},
obj:{
handler: function(newval , oldval) {
xx },
deep:true
}
}