Vue.JSのレスポンシブシステムは、その中心的な強(qiáng)みの1つですが、その根底にあるメカニズムを理解していない人には神秘的に感じるかもしれません。たとえば、なぜオブジェクトや配列で動作しますが、LocalStorageのような他のものでは機(jī)能しませんか？この記事では、この質(zhì)問に答えて、VueのレスポンシブシステムをLocalStorageで動作させる方法を示します。

次のコードを?qū)g行すると、カウンターが靜的値として表示され、LocalStorageの間隔の変化のために予想どおりに変更されないことがわかります。

新しいVue（{
  EL：「#counter」、
  データ：（）=>（{
    カウンター：localStorage.getItem（ "counter"）
  }）、
  計算：{
    平（） {
      this.counter％2 == 0を返します。
    }
  }、
  テンプレート： `<div>
    <div>カウンター：{{counter}}</div>
    <div>カウンターは{{偶數(shù)？ 「偶數(shù)」：「奇妙な '}}</div>
  </div>`
}）;

 // some-other-file.js
setInterval（（）=> {
  const counter = localstorage.getitem（ "counter"）;
  localStorage.setItem（ "counter"、counter 1）;
}、1000）;

Vueインスタンス內(nèi)のcounterプロパティは応答性がありますが、LocalStorageでソースを変更したからといって変更されません。

この問題を解決するには多くの方法があり、最良の方法はおそらくVuexを使用して、LocalStorageと同期して保存された値を維持することです。しかし、この例のように単純なソリューションが必要な場合はどうでしょうか？ Vueのレスポンシブシステムがどのように機(jī)能するかを深く理解する必要があります。

Vueの応答性

Vueがコンポーネントインスタンスを初期化すると、 dataオプションが観察されます。これは、 data內(nèi)のすべてのプロパティを反復(fù)し、 Object.definePropertyを使用してGetter/Setterに変換することを意味します。各プロパティにカスタムセッターを設(shè)定することにより、Vueはプロパティがいつ変更されるかを知ることができ、変更に対応する必要がある依存関係に通知することができます。どの依存関係が特定のプロパティに依存するかをどのようにして知っていますか？ゲッターを活用することにより、計算されたプロパティ、オブザーバー関數(shù)、またはレンダリング関數(shù)アクセスデータプロパティをレンダリングすると登録できます。

 // core/instance/state.js
関數(shù)initdata（）{
  // ...
  観察（データ）
}

 // core/observer/index.js
エクスポート関數(shù)監(jiān)視（値）{
  // ...
  新しいオブザーバー（価値）
  // ...
}

クラスオブザーバーをエクスポートする{
  // ...
  Constructor（value）{
    // ...
    this.walk（value）
  }

  walk（obj）{
    const keys = object.keys（obj）
    for（i = 0; i <keys.length i defineteactive><p>それでは、なぜLocalStorageは反応がないのですか？<strong>屬性を持つオブジェクトではないからです。</strong></p>
<p>しかし、待ってください。アレイを備えたゲッターとセッターを定義することはできませんが、Vueでは、アレイは依然として応答します。これは、アレイがVueの特別なケースであるためです。レスポンシブな配列を持つために、Vueは舞臺裏の配列メソッドを書き直し、Vueのレスポンシブシステムと統(tǒng)合しました。</p>
<p> LocalStorageに似たことをすることはできますか？</p>
<h3> LocalStorage関數(shù)を書き直します</h3>
<p>まず、LocalStorageメソッドをオーバーライドして、どのコンポーネントインスタンスがLocalStorageプロジェクトを要求したかを追跡することにより、最初の例を修正できます。</p>
<p> // LocalStorage Project Keyとそれに依存するVueインスタンスのリストの間のマップconst storeitemsubscribers = {};</p>
<p> const getItem = window.localStorage.getItem; localStorage.getItem =（key、target）=> {console.info（ "gething"、key）;</p>
<p> //依存するVUEインスタンスを収集する場合（！storeItemsubscribers [key]）storeItemsubscribers [key] = []; if（target）storeItemsubscribers [key] .push（target）;</p>
<p> //元の関數(shù)を呼び出してくださいgetItem.call（localStorage、key）; };</p>
<p> const setItem = window.localStorage.setItem; localStorage.setItem =（key、value）=> {console.info（ "siting"、key、value）;</p>
<p> // if（storeitemsubscribers [key]）{storeitemsubscribers [key] .foreach（（dep）=> {if（dep.hasownProperty（key））dep [key] = value;}）; }</p>
<p> //元の関數(shù)setItem.call（localStorage、key、value）を呼び出します。 };</p>
<p> // ...（コードの殘りの部分は元のテキストと同じです）</p>
<p>この例では、 <code>getItem</code>と<code>setItem</code>を再定義して、LocalStorageプロジェクトに依存するコンポーネントを収集および通知しました。新しい<code>getItem</code>では、どのコンポーネントがどのアイテムを要求するかを記録し、 <code>setItem</code>では、アイテムを要求してデータプロパティを書き換えるすべてのコンポーネントに連絡(luò)します。</p>
<p>上記のコードが機(jī)能するためには、コンポーネントインスタンスへの參照を<code>getItem</code>に渡す必要があります。矢印機(jī)能はもう使用できません。そうしないと、 <code>this</code>の正しい値はありません。</p>
<p>私たちがもっとうまくやりたいなら、私たちはより深く掘り下げる必要があります。たとえば、依存関係を明示的に渡さずにどのように依存関係を追跡するのですか？</p>
<h3> Vueで依存関係を収集する方法</h3>
<p>インスピレーションのために、Vueのレスポンシブシステムに戻ることができます。その前に、データプロパティにアクセスすると、データプロパティのgetterは、そのプロパティをさらに変更するために発信者を購読しています。しかし、誰が電話をかけたのかをどのようにして知っていますか？データ屬性を取得すると、そのゲッター機(jī)能には、発信者が誰であるかについての入力がありません。ゲッター機(jī)能には入力がありません。誰が依存関係として登録するかをどのようにして知っていますか？</p>
<p>各データ屬性は、 <code>Dep</code>クラスで反応する必要がある依存関係のリストを維持します。このクラスをより深く掘り下げると、依存関係が登録されるたびに、依存関係自體が既に靜的ターゲット変數(shù)で定義されていることがわかります。この目標(biāo)は、これまでに神秘的な<code>Watcher</code>クラスによって設(shè)定されています。実際、データプロパティが変更されると、これらのオブザーバーは、コンポーネントの再レンダリングまたは計算プロパティの再計算を開始することを?qū)g際に通知されます。</p>
<p>しかし、繰り返しますが、彼らは誰ですか？</p>
<p> Vueがデータオプションを観察可能にすると、各コンポーネントインスタンスのすべての観測関數(shù)（Watcherクラスと混同しないでください）とすべての観測関數(shù)（ <code>Watcher</code>クラスと混同しないでください）と同様に、各コンポーネントインスタンスのレンダリング関數(shù)も作成します。オブザーバーは、これらの機(jī)能の仲間のようなものです。彼らは2つの主なことをします：</p>
<ol>
<li>
<strong>作成時に機(jī)能を評価します。</strong>これにより、依存関係のコレクションがトリガーされます。</li>
<li>
<strong>彼らが依存している値が変化したことを通知されると、彼らは彼らの機(jī)能を再実行します。</strong>これにより、最終的に計算されたプロパティが再計算されるか、コンポーネント全體が再レンダリングされます。</li>
</ol>
<p>オブザーバーが責(zé)任のある関數(shù)を呼び出す前に重要なステップが発生します。<strong>彼らは<code>Dep</code>クラスの靜的変數(shù)のターゲットとして自分自身を設(shè)定します。</strong>これにより、応答性のあるデータ屬性にアクセスされると、依存関係として登録されます。</p>
<h3> LocalStorageと呼んだトラック</h3>
<p>Vueの內(nèi)部メカニズムにアクセスできないため、これは完全にはできません。ただし、VUEのアイデアを使用して、責(zé)任のある関數(shù)を呼び出す前に、観察者が靜的プロパティにターゲットを設(shè)定できるようにすることができます。 LocalStorageを呼び出す前に、コンポーネントインスタンスへの參照を設(shè)定できますか？</p>
<p>データオプションを設(shè)定するときにLocalStorageが呼び出されると仮定した場合、フック<code>beforeCreate</code>して<code>created</code>ことができます。これらの2つのフックは、データオプションの初期化の前後に発射されるため、現(xiàn)在のコンポーネントインスタンスを參照してターゲット変數(shù)を設(shè)定してからクリアできます（ライフサイクルフックでアクセスできます）。次に、カスタムゲッターでは、この目標(biāo)を依存関係として登録できます。</p>
<p>最後にしなければならないことは、これらのライフサイクルフックをすべてのコンポーネントの一部にすることです。これをプロジェクト全體でグローバルミックスインを使用して行うことができます。</p>
<p> // ...（コードの殘りの部分は元のテキストと同じです）</p>
<p>ここで、最初の例を?qū)g行すると、1秒あたりの數(shù)を増やすカウンターが表示されます。</p>
<p> // ...（コードの殘りの部分は元のテキストと同じです）</p>
<h3>思考実験の終わり</h3>
<p>最初の問題を解決しましたが、これは主に思考実験であることを忘れないでください。削除されたプロジェクトやアンインストールされたコンポーネントインスタンスの処理など、いくつかの機(jī)能がありません。また、コンポーネントインスタンスのプロパティ名は、LocalStorageに保存されているプロジェクト名と同じである必要があるなど、いくつかの制限があります。とはいえ、主な目標(biāo)は、Vue Responsiveシステムが舞臺裏でどのように機(jī)能し、それを最大限に活用するかをよりよく理解することです。</p></keys.length>

以上がVueでLocalStorageをリアクティブにする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。