Los principios y el uso de $set() y Vue.set() en Vue

Problema: Al desarrollar con vue, puede encontrarse con una situación: después de generar una instancia de vue y asignar valores a los datos, a veces la vista no se actualiza automáticamente. Es decir, si agrega una nueva propiedad a la instancia después de crearla, no se activará la actualización de la vista.

Ejemplo:

Al hacer clic en el botón de la página:

[Error en la carga de la imagen... (image-377e69-1637720296752)]

Al hacer clic en un botón en la consola:

Motivo:

Debido a limitaciones en ES5, Vue.js no puede detectar la adición o eliminación de propiedades de objetos. Dado que Vue.js convierte propiedades en captadores/definidores al inicializar una instancia, las propiedades deben estar en el objeto de datos para que Vue.js las convierta en una respuesta.

Por lo tanto:

Vue no puede detectar matrices con los siguientes cambios:

Cuando configura un elemento directamente usando un índice, por ejemplo: vm.items[indexOfItem ] = newValue

Cuando modifica la longitud de la matriz, por ejemplo: vm.items.length = newLength

Por ejemplo:

Utilice this.arr [0] para actualizar Cuando se actualiza el contenido de la matriz, la vista no se actualizará

Cuando se usa Vue.set(this.arr, 0, !this.arr[0]) para actualizar la matriz contenido, la vista se actualizará

Utilice this.set(this.arr, 0, !this.arr[0]) Cuando se actualice el contenido de la matriz, la vista se actualizará

Use this.set();

Si el método Para actualizar matrices y objetos, solo necesita manipular los datos

Cada instancia de componente tiene un objeto de instancia de observador correspondiente; , que registra las propiedades como dependencias durante la representación del componente y luego llama. Se notifica a un observador que vuelve a calcular el definidor de dependencia, lo que provoca que se actualice su componente asociado.

Debido a las limitaciones del JavaScript moderno (y la obsolescencia de Object.observe), Vue no puede detectar la adición o eliminación de propiedades de objetos. Debido a que Vue realiza conversiones getter/setter en propiedades al inicializar una instancia, debe existir una propiedad en el objeto de datos para que Vue la convierta para implementar la respuesta.

3.1 A través de Vue.set()

Sintaxis:

Al hacer clic en el botón de la página:

[Error en la carga de la imagen. .. (image-6f4696-1637720296752)]

Al hacer clic en el botón en la consola:

3.1 A través de Vue.set()

Sintaxis:

p>

3.1 A través de Vue.set()

Sintaxis: