javascript - ¿Cuál es la diferencia entre vm. $ Set y Vue.set?

laravel vue.js

Question

He leído y Vue.set cuidadosamente los documentos de Vue "Reactivity in Depth" y la API para vm.$set y Vue.set pero todavía tengo dificultades para determinar cuándo usar cuál. Es importante para mí poder distinguir entre los dos porque en mi proyecto Laravel actual, estamos configurando muchas propiedades en los objetos de forma dinámica.

La distinción en los documentos parece ser entre el idioma que vm. $ Set es "Para la instancia de Vue", mientras que Vue.set es "Para objetos de datos simples" y que Vue.set es global:

Sin embargo, hay formas de agregar una propiedad y hacerla reactiva después de crear una instancia.

Para instancias de Vue, puede utilizar el método de instancia $ set (ruta, valor):

vm.$set(''b'', 2)
// `vm.b` and `data.b` are now reactive

Para objetos de datos simples, puede usar el método global Vue.set (objeto, clave, valor):

Vue.set(data, ''c'', 3)
// `vm.c` and `data.c` are now reactive

Finalmente, me preguntaba si la tercera "opción" de hacer lo anterior (que es para agregar múltiples propiedades a la vez) podría usarse como un sustituto equivalente de cualquiera de las 2 opciones anteriores (agregando solo 1 propiedad en lugar de múltiples) ?

A veces es posible que desee asignar un número de propiedades a un objeto existente, por ejemplo, utilizando Object.assign () o _.extend (). Sin embargo, las nuevas propiedades agregadas al objeto no activarán cambios. En tales casos, cree un objeto nuevo con propiedades tanto del objeto original como del objeto mixin:

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

Answer 1

Aquí está la nota de lanzamiento que vino con la introducción de Vue.set:

Vue ya no extiende Object.prototype con los métodos $ set y $ delete. Esto ha estado causando problemas con las bibliotecas que dependen de estas propiedades en ciertas comprobaciones de condición (por ejemplo, minimongo en Meteor). En lugar de object. $ Set (clave, valor) y object. $ Delete (key), use los nuevos métodos globales Vue.set (object, key, value) y Vue.delete (object, key).

Por lo tanto,. .$set solía estar disponible en todos los objetos; ahora solo está disponible en un Modelo de Vista. Vue.set lo tanto, Vue.set se usa en esos casos ahora cuando tiene una referencia a un objeto reactivo pero no tiene una referencia al modelo de vista al que pertenece.