web-dev-qa-db-fra.com

Quelle est la différence entre vm. $ Set et Vue.set?

J'ai lu et relu attentivement les documents Vue "Reactivity in Depth" et l'API pour vm. $ Set et - Vue.set mais j'ai toujours du mal à déterminer quand utiliser lequel. Il est important pour moi de pouvoir distinguer les deux parce que dans mon projet Laravel , nous définissons de nombreuses propriétés sur les objets de manière dynamique.

La distinction dans la documentation semble être entre le langage que vm. $ Set est "For Vue instance" tandis que Vue.set est "For plain data objects") et que Vue.set est global:

Cependant, il existe des moyens d'ajouter une propriété et de la rendre réactive après la création d'une instance.

Pour les instances Vue, vous pouvez utiliser la méthode d'instance $ set (path, value):

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

Pour les objets de données simples, vous pouvez utiliser la méthode globale Vue.set (objet, clé, valeur):

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

Enfin, je me demandais si la 3e "option" de faire ce qui précède (qui consiste à ajouter plusieurs propriétés en même temps) pourrait être utilisée comme substitut équivalent à l'une des 2 options ci-dessus (en ajoutant juste 1 propriété au lieu de plusieurs) ?

Parfois, vous souhaiterez peut-être attribuer un certain nombre de propriétés à un objet existant, par exemple en utilisant Object.assign () ou _.extend (). Cependant, les nouvelles propriétés ajoutées à l'objet ne déclencheront pas de modifications. Dans de tels cas, créez un nouvel objet avec des propriétés à la fois de l'objet d'origine et de l'objet mixin:

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

Voici la note de version accompagnant l'introduction de Vue.set:

Vue n'étend plus Object.prototype avec les méthodes $ set et $ delete. Cela a causé des problèmes avec les bibliothèques qui s'appuient sur ces propriétés dans certaines vérifications d'état (par exemple, minimongo dans Meteor). Au lieu de l'objet. $ Set (clé, valeur) et de l'objet. $ Delete (clé), utilisez les nouvelles méthodes globales Vue.set (objet, clé, valeur) et Vue.delete (objet, clé).

Alors, .$set était auparavant disponible sur les objets tous - il n'est désormais disponible que sur un modèle de vue lui-même. Vue.set est donc utilisé dans ces cas maintenant lorsque vous avez une référence à un objet réactif mais que vous n'avez pas de référence au modèle de vue auquel il appartient.

26
David K. Hess

a constaté que l'ajout de plusieurs attributs à un objet avec .$set() ne fonctionne bien qu'une seule fois, peut-être Vue d'abord collecté ces attributs ajoutés à une séquence, puis appliquez ces séquences au getter et setter; par exemple.

Vue.set(this.b,'first','first');
this.b.second = 'second';
this.b.third = 'third';
this.b.fourth = 'fourth';

'second','third','fourth' sont aussi réactifs que 'first'

0
user11473448