Vue-watch escucha las propiedades del objeto

1. Descripción general del reloj Vue

Los formatos de oyente de reloj de Vue vienen en dos sabores: 方法格式y 对象格式oyente.

1. El oyente en el formato de método solo puede 监听简单数据类型, por ejemplo: Number、String, ... no puede monitorear los cambios en las propiedades del objeto, ni puede activarse automáticamente al ingresar a la página;
2. Los oyentes de formato de objeto pueden escuchar 对象属性los cambios. Bajo ciertas condiciones, los cambios de datos también se pueden monitorear cuando se carga la página;

2. Método de escucha del objeto Vue

1. El nombre de la clave se divide para monitorear 某一个属性el cambio del objeto;
   el nombre de la propiedad .se separa del objeto y 引号se envuelve para monitorear una determinada propiedad del objeto.

data() {
    
    
	return {
    
    
		obj:{
    
    
			name:'andy',
			age:18
}}},

watch:{
    
    
	'obj.name'(newval.oldval) {
    
     
		// 代码实现
	}
}

2. calculado + reloj, monitorear 某一个el cambio de propiedad del objeto;

computed:{
    
    
     ageVal() {
    
    
           return this.obj.age;
     }
}
 watch:{
    
    
     ageVal(newval,oldval) {
    
    
           // 代码实现
     }
}

3. profundo Monitoreo en profundidad, monitoreo de 所有属性cambios en objetos;
   1. deep：trueCuando el monitoreo profundo está habilitado, cualquier cambio en el valor de la propiedad activará el monitoreo profundo;
   2. profundo El monitoreo en profundidad solo puede obtener el valor más reciente;
   3. No se recomienda el monitoreo profundo, es fácil que la página se congele, porque el monitoreo profundo profundo necesita atravesar todas las propiedades anidadas en el objeto monitoreado;

obj:{
    
    
      handler(val) {
    
    
           // 代码实现   val 值是 obj 整个对象
      },
      deep:true // deep 为 true 时，开启深度监听
      // immediate:false 当immediate 值为 true 时，刚载入页面时，也可监听数据的变化
}