Vue3 の応答性の原理は何ですか?

Vue3 の応答性の原則は、DOM を手動で操作することなく、データが変更されたときにアプリケーションが自動的にページを更新できるようにするブラックテクノロジです。この不思議な働きには複雑な原理が関係しているのですが、初心者目線でユーモアを交えて解説していきます。

まず第一に、Vue3 の応答原理は依存関係と変更の監視に基づいていることを知っておく必要があります。データオブジェクトが別のオブジェクトまたはコンポーネントに依存する場合、関係が確立されます。これらのデータが変更されると、それらに依存するオブジェクトまたはコンポーネントに通知が送られ、その状態が更新されます。

複雑そうに聞こえますが、実際のプロセスは非常に簡単です。データを自動車、依存関係をガソリンスタンドと考えることができます。車がガソリンを満タンにすると、発進して動き始める準備が整います。車はガソリンが少なくなると、ガソリンスタンドで給油されるまで停止します。

Vue3 では、Vue.observable 関数を通じてリアクティブオブジェクトを作成できます。この関数はオブジェクトを返します。このオブジェクトの属性値には、配列、オブジェクト、関数など、任意のタイプのデータを指定できます。このオブジェクトのプロパティ値が変更されると、Vue3 はその変更を自動的に検出し、このプロパティに依存するすべてのオブジェクトまたはコンポーネントに更新するように通知します。

簡単な例を次に示します。

import {
    
     reactive } from 'vue'  
  
const state = reactive({
    
      
  count: 0  
})  
  
state.count++ // 增加计数器  
console.log(state.count) // 输出1

上の例では、Vue.observable 関数を使用してリアクティブオブジェクトの状態を作成しました。このオブジェクトの count プロパティは変更および読み取りが可能です。state.count++ を実行すると、count 属性の値が 1 に変更されます。state はリアクティブなオブジェクトであるため、Vue3 はこの変更を自動的に検出し、count プロパティに依存するすべてのオブジェクトまたはコンポーネントに更新するよう通知します。この例では、state.count の値を直接出力するため、出力結果は 1 になります。

Vue.observable 関数に加えて、Vue3 では、ES6 プロキシオブジェクトを使用する、応答性の高いオブジェクトを作成する簡単な方法も提供します。プロキシオブジェクトを使用してオブジェクトへのアクセス操作をインターセプトし、依存関係の自動化と変更監視を実現できます。プロキシを使用してリアクティブオブジェクトを作成する例を次に示します。

const state = new Proxy({
    
    }, {
    
      
  get(target, key) {
    
      
    return Reflect.get(target, key)  
  },  
  set(target, key, value) {
    
      
    Reflect.set(target, key, value)  
    // 变化监测逻辑  
    console.log(`state.${
      
      key} changed to ${
      
      value}`)  
  }  
})  
  
state.count++ // 输出"state.count changed to 1"  
console.log(state.count) // 输出1

上の例では、ES6 プロキシオブジェクトを使用して、リアクティブオブジェクト状態を作成します。state.count を読み取る場合、Proxy は自動的に get メソッドを呼び出して属性値を返します。state.count を変更する場合、Proxy は自動的に set メソッドを呼び出し、変更監視ロジックに更新を通知します。この例では、state.count++ 操作を実行したため、出力は「state.count が 1 に変更されました」となります。同時に、state は応答オブジェクトであるため、state.count の値を直接出力すると 1 も出力されます。

Vue3 のリアクティブ原理の基本を理解したところで、より複雑な例をいくつか見てみましょう。

配列の応答性
Vue3 によって配列が応答的に作成されると、配列内の要素も応答的に作成されます。これは、配列内の要素が変更されると、Vue3 がその変更を自動的に検出し、この配列に依存するすべてのオブジェクトまたはコンポーネントに更新するよう通知することを意味します。以下に例を示します。

import {
    
     reactive } from 'vue'  
  
const state = reactive({
    
      
  list: ['apple', 'banana', 'orange']  
})  
  
state.list.push('grape') // 添加元素  
console.log(state.list) // 输出["apple", "banana", "orange", "grape"]

上の例では、文字列を含む配列リストを定義しました。state はリアクティブなオブジェクトであるため、list もリアクティブになります。state.list.push('grape') を実行すると、リスト配列の長さが増加し、Vue3 はこの変更を自動的に検出し、リスト配列に依存するすべてのオブジェクトまたはコンポーネントに更新するように通知します。この例では、state.list の値を直接出力しているため、出力結果は ["apple", "banana", "orange", "grape"] となります。

ネストされたオブジェクトの応答性
Vue3 によってオブジェクトが応答的に作成されるとき、そのオブジェクトに他のオブジェクトまたは配列も含まれている場合、これらのネストされたオブジェクトまたは配列も応答的に作成されます。以下に例を示します。

import {
    
     reactive } from 'vue'  
  
const state = reactive({
    
      
  user: {
    
      
    name: 'Tom',  
    age: 18,  
    gender: 'male'  
  }  
})  
  
state.user.age++ // 修改年龄  
console.log(state.user.age) // 输出20

上の例では、プロパティとネストされたオブジェクトを含む状態を定義しました。state はリアクティブなオブジェクトであるため、そのすべてのプロパティはリアクティブになります。state.user.age++ を実行すると、ネストされたオブジェクト user の age 属性が 20 に変更されます。同時に、Vue3 はこの変更を自動的に検出し、依存するすべてのユーザーオブジェクトまたはその属性オブジェクトに更新するように通知します。この例では、state.user.age の値を直接出力するため、出力結果は 20 になります。

Vue3 の応答性の原理は何ですか?

おすすめ