Anomalía del eco del control de fecha Vue (el-date-picker) y su análisis principal

Anomalía del eco del control de fecha Vue (el-date-picker) y su análisis principal

Recientemente, usé element-ui + vue en un proyecto para crear una nueva función. Usé element-ui diolag como una capa emergente para la adición y modificación de datos. Diolag usó el-date- Control de fecha del selector, después de la primera selección se agrega, no importa si se agrega o se modifica nuevamente, volver a seleccionar la fecha del eco no cambiará la hora de visualización de la vista, pero su valor se ha actualizado.

 代码如下：

<el-date-picker v-model="rentalForm.rentSd"  type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width:150px"/>
// js 部分
showRentail(row){
      if(row){
        this.rentalForm.rentSd = row.rentSd;
      }else{
        this.rentalForm.rentSd = '';
      }
      this.dialogRentalVisible = true;
      this.$nextTick(() => {
        this.$refs['rentalForm'].clearValidate();
      })
}

De hecho, los datos se devolverán al cuadro de fecha, la interfaz se muestra de la siguiente manera: Por ejemplo: la fecha original es: 2020-09-29

Pero en este momento hago clic en el cuadro de fecha para modificar la fecha, por ejemplo: 2020-09-09, el valor en el cuadro de fecha no cambiará, el valor correspondiente del formulario se ha actualizado a: 2020-09-09, como sigue:

E incluso si el valor inicial está definido en los datos, la hora de visualización del cuadro de fecha no cambiará.

Después de consultar la información relevante, encontré este párrafo en el sitio web oficial:

Si se agrega un nuevo atributo a la instancia después de crearla, no activará una actualización de vista.

Es decir, cuando desea agregar un nuevo atributo o cambiar el valor de un objeto o una matriz de objetos declarados o asignados en los datos, Vue no puede detectar el cambio de su atributo y desencadenar una actualización de la vista.
Investigue el motivo: debido a las restricciones de ES5, Vue no puede detectar la adición o eliminación de propiedades del objeto. Debido a que Vue.js convierte la propiedad en getter / setter cuando inicializa la instancia, la propiedad debe estar en el objeto de datos para que Vue la convierta y responda.
Para manejar esta situación, podemos usar el método $ set (), que puede agregar atributos y activar una actualización de vista.
$ set (objetivo, clave, valor)

• destino: la fuente de datos que se va a cambiar (puede ser un objeto o una matriz)
• datos específicos clave que se modificarán (índice)
• valor valor reasignado

cual es:

if(row){
   this.$set(this.rentalForm, "rentSd", row.rentSd);
}else{
   this.$set(this.rentalForm, "rentSd", "");
}

Dado que $ set () puede activar una actualización, el principio es:

Cada instancia de componente tiene un objeto de instancia de observador correspondiente, que registrará el atributo como una dependencia durante el proceso de representación del componente, y luego, cuando se llame al establecedor de la dependencia, notificará al observador que vuelva a calcular, de modo que su componente asociado pueda ser actualizado.

Mire el código fuente del método set (directorio raíz del proyecto vue \ node_modules \ vue \ src \ core \ observer \ index)

Formación

Aquí, se llama directamente a target.splice (key, 1, val). Anteriormente dijimos que llamar a 7 métodos como push y pop proporcionados por el objeto de matriz puede hacer que la página se vuelva a representar, y el empalme también es uno de 7 métodos proporcionados por él. Especies

Objeto
1. Determine si la clave es originalmente un atributo del objeto y la clave no es un atributo del prototipo del objeto. Significa que esta clave ya se ha definido en el objeto, simplemente modifique el valor directamente y la respuesta se puede activar automáticamente.

Vue usa Object.defineProperty para interceptar el objeto. Cuando se activa el get, recopilará la dependencia (la dependencia recopilada aquí sigue siendo como una matriz, entendida como una función de representación). Cuando se activa el conjunto, la dependencia se activará ., Haciendo que la función de renderizado realice un nuevo renderizado de la página. Entonces, ¿dónde se activó el get la primera vez? De hecho, se activa cuando la página se renderiza por primera vez.Recopila de forma recursiva los atributos del objeto, por lo que si modificamos los atributos existentes del objeto, hará que la página se vuelva a renderizar.

2. Primero defina el valor de la variable ob como objetivo. Ob , ¿qué objeto es este atributo ob ? Vue agrega un atributo ob a los objetos sensibles . Si un objeto tiene este atributo ob , significa que el objeto es un objeto sensible. Cuando modificamos los atributos existentes del objeto, se activará la representación de la página. Pero cuando este objeto es un objeto de instancia vue o un objeto de datos raíz, se lanzará una advertencia de excepción. Cuando este objeto no responde, se asigna y devuelve directamente

3. Donde Set finalmente procesa el objeto de respuesta, defineReactive (ob.value, key, val) significa agregar una dependencia al atributo recién agregado, y la representación de la página se activará cuando el nuevo atributo se modifique directamente en el futuro; ob El código dep.notify () significa activar la dependencia actual (la dependencia aquí todavía puede entenderse como una función de renderizado), por lo que la página se volverá a renderizar.

En resumen , lo anterior es principalmente para resolver el problema del componente el-date-picker, a través de la solución, para comprender su principio de funcionamiento. En nuestro trabajo diario, podemos encontrarnos con todo tipo de problemas extraños, pero después de resolverlos, volver atrás y rastrear las causas fundamentales será beneficioso e inofensivo para la mejora de nuestra propia tecnología.