Comment utiliser Vue.set pour implémenter des données réactives dans Vue

Vue fournit un moyen très pratique de mettre à jour des données réactives, qui consiste à utiliser la méthode Vue.set. Cet article présentera comment utiliser la méthode Vue.set et ses points de connaissances associés.

1. Introduction à la méthode Vue.set

La méthode Vue.set est une API globale fournie par Vue, qui est utilisée pour ajouter une propriété à un objet réactif et garantir que la nouvelle propriété est réactive. Dans Vue, nous utilisons généralement des objets et des tableaux comme sources de données pour les composants. Ces sources de données sont généralement observées et prennent en charge la surveillance par le système réactif de Vue. Cependant, dans certains cas, nous devons ajouter un nouvel attribut ou élément à l'objet ou au tableau. À ce stade, si la méthode Vue.set n'est pas utilisée, le nouvel attribut ou élément ajouté ne sera pas surveillé par le système réactif, ce qui entraîne. dans Quelques questions.

2. Utilisation de la méthode Vue.set

La méthode Vue.set est une API globale, nous pouvons donc l'utiliser directement dans le composant. Voici comment la méthode Vue.set est appelée :

Vue.set(obj, key, value)

où obj représente l'objet sur lequel opérer, key représente le nom de l'attribut à ajouter et value représente l'attribut valeur à ajouter.

Nous pouvons démontrer l'utilisation de Vue.set à travers le code suivant :

<template>
  <div>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
    <button @click="addData">添加数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    addData() {
      Vue.set(this.userInfo, 'phone', '123456789') // 添加响应式属性
    }
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté une nouvelle propriété phone dans l'objet userInfo et utilisé la méthode Vue.set pour nous assurer qu'elle est réactive. Lorsque nous cliquons sur le bouton, un attribut nommé phone avec une valeur de « 123456789 » sera ajouté à l'objet userInfo. Nous pouvons voir le résultat dans le modèle. À ce stade, l'opération d'ajout utilisant Vue.set peut non seulement obtenir la réponse dans les mises à jour ultérieures, mais elle peut également déclencher toute mise à jour de liaison de données pour l'objet.

3. Analyse principale de Vue.set

Le principe d'implémentation de Vue.set n'est pas compliqué et est principalement implémenté en appelant le système réactif de Vue. Pour l'opération d'ajout d'objet, l'implémentation de Vue.set est la suivante :

Vue.set = function (obj, key, value) {
  // 判断obj是否是响应式的对象
  if (hasOwn(obj, key)) {
    obj[key] = value
    return
  }
  // 获取当前的观察者
  const ob = obj.__ob__
  // 非响应式对象，直接赋值
  if (!ob) {
    obj[key] = value
    return
  }
  // 将新增属性的值变为响应式的
  defineReactive(ob.value, key, value)
  ob.dep.notify()
}

Tout d'abord, la méthode Vue.set déterminera si obj est un objet réactif via la méthode hasOwn de Vue. Si tel est le cas, attribuez directement une valeur à l'objet. Sinon, il obtiendra l'observateur ob d'obj, puis appellera la méthode DefineReactive pour rendre la nouvelle propriété réactive, et appellera la méthode ob.dep.notify pour notifier au composant de se mettre à jour.

Pour l'opération d'ajout du tableau, l'implémentation de Vue.set est la suivante :

Vue.set = function (target, key, val) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (hasOwn(target, key)) {
    target[key] = val
    return val
  }
  const ob = target.__ob__
  if (!ob) {
    target[key] = val
    return val
  }
  ob.convert(key, val)
  ob.dep.notify()
  return val
}

On voit que pour l'opération d'ajout du tableau, Vue.set est principalement implémenté en utilisant la méthode splice. Dans le même temps, pour les opérations sur les tableaux, nous pouvons également utiliser Vue.set pour garantir que les éléments ajoutés sont réactifs.

IV.Résumé

Cet article présente principalement le principe d'utilisation et de mise en œuvre de la méthode Vue.set est un moyen très pratique fourni par Vue pour implémenter des mises à jour de données réactives. Qu'il s'agisse d'ajouter des éléments à un objet ou à un tableau, nous pouvons utiliser la méthode Vue.set pour garantir que ces nouveaux éléments sont réactifs, résolvant ainsi certains problèmes de mise à jour de données réactives.

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!