Vue.set を使用して Vue でレスポンシブ データを実装する方法

Vue は、Vue.set メソッドを使用して、応答性の高いデータを更新する非常に便利な方法を提供します。この記事では、Vue.set メソッドの使用方法と関連する知識ポイントを紹介します。

1. Vue.set メソッドの概要

Vue.set メソッドは Vue が提供するグローバル API で、応答性の高いオブジェクトにプロパティを追加し、新しいプロパティが確実に反映されるようにするために使用されます。応答性があります。 Vue では通常、コンポーネントのデータ ソースとしてオブジェクトと配列を使用します。これらのデータ ソースは通常、Vue の応答システムによって監視され、監視をサポートします。ただし、場合によっては、オブジェクトまたは配列に新しい属性または要素を追加する必要があります。このとき、Vue.set メソッドが使用されていない場合、追加された新しい属性または要素は応答システムによって監視されず、その結果、いくつかの問題では。

2. Vue.set メソッドの使用

Vue.set メソッドはグローバル API であるため、コンポーネント内で直接使用できます。 Vue.set メソッドの呼び出し方法は次のとおりです。

Vue.set(obj, key, value)

このうち、obj は操作対象のオブジェクト、key は属性を表します。追加する名前、および値 追加する属性値を示します。

次のコードを通じて Vue.set の使用方法をデモンストレーションできます:

<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>

上記のコードでは、userInfo オブジェクトに新しい属性phone を追加し、Vue.set の方法を使用して確かにレスポンシブです。ボタンをクリックすると、値「123456789」を持つ電話という名前の属性が userInfo オブジェクトに追加され、テンプレートで結果を確認できます。現時点では、Vue.set を使用した追加操作は、後続の更新で応答を取得できるだけでなく、オブジェクトのデータ バインディング更新をトリガーすることもできます。

3. Vue.set の原理分析

Vue.set の実装原理は複雑ではなく、主に Vue の応答システムを呼び出すことによって実装されます。オブジェクト追加操作の場合、Vue.set の実装は次のとおりです:

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()
}

まず、Vue.set メソッドは、Vue の hasOwn メソッドを通じて obj が応答性の高いオブジェクトであるかどうかを判断します。オブジェクトを直接操作します。そうでない場合は、obj のオブザーバー ob を取得し、defineReactive メソッドを呼び出して新しいプロパティを応答型にし、ob.dep.notify メソッドを呼び出してコンポーネントに更新を通知します。

配列の加算演算の場合、Vue.set の実装は次のとおりです。

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
}

配列の加算演算については、Vue.set が主に次のように実装されていることがわかります。スプライス方法。同時に、配列操作の場合は、Vue.set を使用して、追加された要素が応答することを確認することもできます。

4. 概要

この記事では主に、Vue.set メソッドの使用法と実装原理を紹介します.Vue.set メソッドは、レスポンシブ データを実装するために Vue が提供する非常に便利な方法です。 。要素をオブジェクトに追加する場合でも、配列に追加する場合でも、Vue.set メソッドを使用して、これらの新しい要素が確実に応答するようにすることで、応答性の高いデータ更新の問題を解決できます。

以上がVue.set を使用して Vue でレスポンシブ データを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。