Vueの反応性の原理を詳しく解説した記事-Vue.js-php.cn

Vueの反応性の原理を詳しく解説した記事

青灯夜游

リリース： 2023-02-13 19:30:59

転載

1659 人が閲覧しました

この記事は、Vue を学習し、Vue の応答性の原則を深く理解するのに役立ちます。お役に立てば幸いです。

Vueの反応性の原理を詳しく解説した記事

この記事は、レスポンシブ構文シュガーの譲渡を記念します

早速、本題に入りましょう。簡単な例を示します:

let a=3
let b=a*10
console.log(b)//30
a=4
console.log(b)//40

ログイン後にコピー

現時点では b=4*10 が必要ですが、#var## の前に ## を追加したとしても、これは明らかに不可能です。 # 変数のプロモーション のみが行われ、指定した値はプロモーションされません。現時点では、応答性の役割が反映されています。

import { reactive } from &#39;vue&#39;

let state = reactive({ a: 3 })
let b = computed(() => state.a * 10)
console.log(b.value) // 30
state.a = 4
console.log(b.value) // 40

ログイン後にコピー

単純な

応答性 API

のみが、変更を追跡する効果を実現できます。 [関連する推奨事項: vuejs ビデオチュートリアル 、Web フロントエンド開発 ]

リアクティブの分析

実際には、Vue3

reactive

は本質的に、データの依存関係を追跡する依存関係グラフを作成することによる パブリッシュ/サブスクライブモデル です。依存関係グラフは、どのデータがどのデータに依存するかを説明するグラフです。データが変更されると、Vue 3 の

reactive

システムがビューの更新を自動的にトリガーします。これは、依存関係グラフ内のデータの変更を追跡し、それをビューの更新に関連付けることによってこれを実現するためです。ここでは、簡単な例として、Youda が Vue Master でデモしたコードをリストします。

class Dep{
    constructor(value){
        this.subscribers=new Set()
        this._value=value
    }
    get value(){
        this.depend()
        return this._value
    }
    set value(newValue){
        this._value=newValue
        this.notify()
    }
    depend(){
        if(activeEffect){
            this.subscribers.add(activeEffect)
        }
    }
    notify(){
        this.subscribers.forEach(effect=>{
            effect()
        })
    }
}

ログイン後にコピー

このコードを分析してみましょう:

subscribe
属性を購読者リストとして定義し、すべての購読者情報を保存します
depend
関数は依存関係を管理するために使用されます。つまり、サブスクライバが依存する変数
notify
関数が通知として使用されます。この変数の値はすべてのサブスクライバに対して変更されました
変数の値が変更されると、すべてのサブスクライバーに更新するように自動的に通知できます

Vue2 の Object.defineProperty

実際には、 Vue2 の時代では応答性は

Object.defineProperty

によって実装されていましたが、Vue3 では Proxy に切り替えられました。その理由を実際のコードと組み合わせて見てみましょう。まず、 Vue2 がどのように実装されているかを見てください: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function reactive(raw){ Object.keys(raw).forEach(ket=>{ const dep=new Dep() let value=raw[key] Object.definProperty(raw,key,{ get(){ dep.depend() return value }, //当属性发生 set(newValue){ value=newValue dep.notify() } }) }) //这时候返回的原始对象已经具有响应性 return raw }</pre><div class="contentsignin">ログイン後にコピー</div></div>このような単純なリアクティブ API が実装されています

しかし、ここでの欠点は明らかです:

Vue 2.x では、渡されるオブジェクトは直接

Vue.observable によって変更されました。Vue3 では、 応答性の高いプロキシを返しますが、ソースオブジェクトを直接変更しても応答しません。これにより、次のような問題が発生します。 :

オブジェクトのプロパティを
追加または削除する場合、Vue は初期化時にプロパティのゲッター/セッター変換を実行するため、Vue2 の応答性を検出できません。インスタンスの場合、プロパティは
data に存在する必要があります。オブジェクトに存在する場合にのみ、Vue はそれを応答型に変換できます。 サブスクリプトと長さ の変更を検出できません
array
もちろん、これは歴史的な制限です。当時、ES5 は
Object.definProperty
しか選択できませんでしたが、 ES6 版では

Proxy

が増えていますが、この時点で Vue の応答式がバージョンアップされました Vue3 の Proxy

Vue3 はを使用していますデータ変更を監視するための Proxy Vue2 と比較して、上記の問題を解決するだけでなく、次の利点もあります:

vue を使用する必要がない.$set

でリアクティビティをトリガーし、コードの見栄えを良くします。
はじめに
包括的な配列変更検出、Vue2 の無効な境界条件を排除します。 Vue3 で書かれたレスポンシブコード。開発がより便利になります
実際のコードがどのようなものかを見てみましょう:
const reactiveHandles={
    get(target,key,receiver){
        const dep=getDep(target,key)
        dep.depend()
        return Reflect.get(target,key,receiver)
    },
    set(target,key,value,receiver){
        const dep=getDep(target,key)
        const result=Reflect.set(target,key,value,receiver)
        dep.notify()
        return result
    }
}
ログイン後にコピー
レスポンシブな方法はオブジェクトの依存関係を収集
Vue3 の応答性の本質

ref

公式ドキュメントに次のような文があります: reactive のさまざまな制限() は、最終的には JavaScript が機能できないためです。すべての値の型に対する「参照」メカニズムと、リアクティブの制限は次のとおりです。

は、配列などの監視可能なデータ構造のみを処理できます。およびオブジェクト、およびプリミティブデータ型などの観察できないデータ構造は監視できません

#データが配置されているコンポーネントで定義されたデータのみを処理でき、グローバル変数は処理できません

#そして今回はそれが必要です
ref
がここにあり、ref は
基本データ型
のために生まれ、リアクティブの欠点を補っています。単純な単一の変数値に適しています（ただし、実際の開発では、ほとんどの場合、単なる参照です。はははは）
ところで、レスポンシブ構文シュガーの提案がキャンセルされたのは残念です

(学習ビデオ共有: vuejs 入門チュートリアル、基本プログラミングビデオ )
以上がVueの反応性の原理を詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。