calculado
Computed es adecuado para calcular dinámicamente el valor del atributo en los datos. Se debe agregar el retorno. El atributo en los datos no se puede asignar. Cuando no hay cambios, primero se leerá de la caché.
Escenario de uso: cuando un valor se ve afectado por varios atributos
computed: {
btnText(){
return this.totalCount !== 0 ? `${
this.totalCount}s`: "获取验证码"
}
}
A veces también puedes usar get y set
computed: {
list: {
get() {
return this.$store.state.list
},
set(value) {
this.$store.commit('updateList', value)
}
}
}
reloj
Watch es para monitorear el cambio del valor en los datos. Cuando el atributo en los datos cambia, se ejecutará la función en watch. Hay dos parámetros. El primero es newVal y el segundo es oldVal. Al monitorear los cambios de los datos del tipo de referencia, debe realizar un monitoreo profundo ( controlador + profundo para un monitoreo profundo. Inmediato: verdadero cuando la página se carga por primera vez, realice un monitoreo.
Escenario de uso: cuando un cambio de datos afecta a varios datos
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 // 该回调将会在侦听开始之后被立即调用
},
},
¿Cómo monitorear cambios en múltiples valores?
Watch debe usarse junto con calculado
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
}
}