Vigilancia del reloj en vue
1. Controle el cambio de datos a través del reloj, cuando los datos cambien, imprimirá el valor actual
watch: {
data(val, value) {
console.log(val) //变化之前的值
console.log(value) //变化之后的值
}
}
2. Monitoree el cambio de datos de la lista a través del reloj, cuando los datos cambien, this.number++ (usando un monitoreo profundo)
data（） {
return {
list: {
'id': 1,
'type': 0
},
number: 0
}
},
watch: {
list: {
handler(newVal) {
this.number++
},
deep: true
}
}
3. Supervise el cambio de datos a través del reloj, cuando los datos cambien, ejecute el método de cambio
atributos inmediatos, manejadores y profundos en el reloj
1. El controlador inmediato y el controlador tienen una función cuando se usa el reloj, es decir, cuando el valor se vincula por primera vez, la función de monitoreo no se ejecutará, solo cuando cambie el valor. Si necesitamos ejecutar la función cuando el valor está inicialmente vinculado, debemos usar el atributo inmediato.
data（） {
return {
list: {
'id': 1,
'type': 0
},
number: 0
}
}，
watch: {
list: {
handler(newVal) {
this.number++
},
immediate: true
}
}
2. profundo Cuando es necesario monitorear los cambios de un objeto, el método ordinario de observación no puede monitorear los cambios de las propiedades internas del objeto.En este momento, se necesita la propiedad profunda para monitorear el objeto en profundidad.
data（） {
return {
list: {
'id': 1,
'type': 0
},
number: 0
}
}，
watch: {
list: {
handler(newVal) {
this.number++
},
deep: true
}
}
①Establezca deep:true para monitorear los cambios de list.id. En este momento, este oyente se agregará a todos los atributos de la lista. Cuando hay muchos atributos de objeto, el controlador se ejecutará para cada cambio de valor de atributo. Si solo necesita monitorear el valor de una propiedad en el objeto, puede hacer la siguiente optimización: Use la forma de una cadena para monitorear la propiedad del objeto, de modo que solo se agregue una propiedad específica del objeto con un oyente
data（） {
return {
list: {
'id': 1,
'type': 0
}
}
}，
watch: {
'list.id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}
Si crees que te es útil, ¡recuerda darle me gusta! ! !