Explication détaillée de la fonction Vue.set et comment ajouter dynamiquement des propriétés réactives

Explication détaillée de la fonction Vue.set et comment ajouter dynamiquement des attributs réactifs

Vue.js est un framework JavaScript populaire qui fournit un moyen simple, efficace et flexible de créer des interfaces utilisateur. Dans Vue.js, nous pouvons utiliser des attributs réactifs pour implémenter une liaison bidirectionnelle des données, afin que les modifications des données puissent être automatiquement reflétées sur l'interface. Cependant, nous devons parfois ajouter des propriétés réactives de manière dynamique, nous devons alors utiliser la fonction Vue.set.

La fonction Vue.set est une fonction globale fournie par Vue.js, qui est utilisée pour ajouter un attribut réactif à un objet de données existant. Son utilisation est très simple. Il suffit de transmettre un objet cible, un nom de propriété et une valeur, et la fonction Vue.set convertira automatiquement la propriété en propriété responsive. Voici un exemple :

// 创建一个Vue实例
var vm = new Vue({
  data: {
    obj: {
      name: '张三',
      age: 18
    }
  }
})

// 动态添加一个响应式属性
Vue.set(vm.obj, 'gender', '男')

// 输出结果
console.log(vm.obj.gender) // 男

Dans cet exemple, nous créons une VM d'instance Vue et définissons un objet obj sous l'attribut data, qui contient les attributs 'name' et 'age'. Ensuite, nous utilisons la fonction Vue.set pour ajouter dynamiquement un attribut « genre » et lui attribuer la valeur « mâle ». Enfin, nous affichons la valeur de vm.obj.gender, et vous pouvez voir qu'elle affiche « mâle », indiquant qu'un attribut réactif a été ajouté avec succès.

Il convient de noter que la fonction Vue.set ne peut être utilisée que pour des objets de données existants. Si nous essayons d'utiliser la fonction Vue.set pour ajouter de la réactivité à une propriété qui n'existe pas à l'origine, cela ne fonctionnera pas. En effet, Vue.js effectue uniquement un traitement réactif sur les propriétés existantes lors de l'initialisation des données.

En plus de la fonction Vue.set, nous pouvons également utiliser la méthode Vue.$set pour obtenir le même effet. La méthode Vue.$set est une méthode d'instance de Vue.js et peut être appelée directement via l'instance de Vue. Ce qui suit est le code équivalent de l'exemple ci-dessus :

// 创建一个Vue实例
var vm = new Vue({
  data: {
    obj: {
      name: '张三',
      age: 18
    }
  }
})

// 动态添加一个响应式属性
vm.$set(vm.obj, 'gender', '男')

// 输出结果
console.log(vm.obj.gender) // 男

Comme vous pouvez le voir, l'effet de l'utilisation de la méthode Vue.$set et de la fonction Vue.set est le même, et elles peuvent toutes deux ajouter dynamiquement des propriétés réactives.

Pour résumer, la fonction Vue.set et la méthode Vue.$set sont des méthodes fournies par Vue.js pour ajouter dynamiquement des propriétés réactives. Ils peuvent facilement réaliser une liaison bidirectionnelle des données, de sorte que les modifications apportées aux données puissent être automatiquement mises à jour sur l'interface. Lorsque vous utilisez la fonction Vue.set ou la méthode Vue.$set, veuillez noter qu'elle ne peut agir que sur des propriétés existantes. Si l'attribut à ajouter n'existe pas à l'origine, il doit d'abord être défini lors de l'initialisation des données.

J'espère que cet article vous sera utile pour apprendre et utiliser Vue.js !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!