VueでLocalStorageをリアクティブにする方法

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

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

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

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

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

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

Vueの応答性

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

 // core/instance/state.js
関数initdata（）{
  // ...
  観察（データ）
}

 // core/observer/index.js
エクスポート関数監視（値）{
  // ...
  新しいオブザーバー（価値）
  // ...
}

クラスオブザーバーをエクスポートする{
  // ...
  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のレスポンシブシステムと統合しました。</p>
<p> LocalStorageに似たことをすることはできますか？</p>
<h3 id="LocalStorage関数を書き直します"> LocalStorage関数を書き直します</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> //元の関数を呼び出してください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> //元の関数setItem.call（localStorage、key、value）を呼び出します。 };</p>
<p> // ...（コードの残りの部分は元のテキストと同じです）</p>
<p>この例では、 <code>getItem</code>と<code>setItem</code>を再定義して、LocalStorageプロジェクトに依存するコンポーネントを収集および通知しました。新しい<code>getItem</code>では、どのコンポーネントがどのアイテムを要求するかを記録し、 <code>setItem</code>では、アイテムを要求してデータプロパティを書き換えるすべてのコンポーネントに連絡します。</p>
<p>上記のコードが機能するためには、コンポーネントインスタンスへの参照を<code>getItem</code>に渡す必要があります。矢印機能はもう使用できません。そうしないと、 <code>this</code>の正しい値はありません。</p>
<p>私たちがもっとうまくやりたいなら、私たちはより深く掘り下げる必要があります。たとえば、依存関係を明示的に渡さずにどのように依存関係を追跡するのですか？</p>
<h3 id="Vueで依存関係を収集する方法"> Vueで依存関係を収集する方法</h3>
<p>インスピレーションのために、Vueのレスポンシブシステムに戻ることができます。その前に、データプロパティにアクセスすると、データプロパティのgetterは、そのプロパティをさらに変更するために発信者を購読しています。しかし、誰が電話をかけたのかをどのようにして知っていますか？データ属性を取得すると、そのゲッター機能には、発信者が誰であるかについての入力がありません。ゲッター機能には入力がありません。誰が依存関係として登録するかをどのようにして知っていますか？</p>
<p>各データ属性は、 <code>Dep</code>クラスで反応する必要がある依存関係のリストを維持します。このクラスをより深く掘り下げると、依存関係が登録されるたびに、依存関係自体が既に静的ターゲット変数で定義されていることがわかります。この目標は、これまでに神秘的な<code>Watcher</code>クラスによって設定されています。実際、データプロパティが変更されると、これらのオブザーバーは、コンポーネントの再レンダリングまたは計算プロパティの再計算を開始することを実際に通知されます。</p>
<p>しかし、繰り返しますが、彼らは誰ですか？</p>
<p> Vueがデータオプションを観察可能にすると、各コンポーネントインスタンスのすべての観測関数（Watcherクラスと混同しないでください）とすべての観測関数（ <code>Watcher</code>クラスと混同しないでください）と同様に、各コンポーネントインスタンスのレンダリング関数も作成します。オブザーバーは、これらの機能の仲間のようなものです。彼らは2つの主なことをします：</p>
<ol>
<li>
<strong>作成時に機能を評価します。</strong>これにより、依存関係のコレクションがトリガーされます。</li>
<li>
<strong>彼らが依存している値が変化したことを通知されると、彼らは彼らの機能を再実行します。</strong>これにより、最終的に計算されたプロパティが再計算されるか、コンポーネント全体が再レンダリングされます。</li>
</ol>
<p>オブザーバーが責任のある関数を呼び出す前に重要なステップが発生します。<strong>彼らは<code>Dep</code>クラスの静的変数のターゲットとして自分自身を設定します。</strong>これにより、応答性のあるデータ属性にアクセスされると、依存関係として登録されます。</p>
<h3 id="LocalStorageと呼んだトラック"> LocalStorageと呼んだトラック</h3>
<p>Vueの内部メカニズムにアクセスできないため、これは完全にはできません。ただし、VUEのアイデアを使用して、責任のある関数を呼び出す前に、観察者が静的プロパティにターゲットを設定できるようにすることができます。 LocalStorageを呼び出す前に、コンポーネントインスタンスへの参照を設定できますか？</p>
<p>データオプションを設定するときにLocalStorageが呼び出されると仮定した場合、フック<code>beforeCreate</code>して<code>created</code>ことができます。これらの2つのフックは、データオプションの初期化の前後に発射されるため、現在のコンポーネントインスタンスを参照してターゲット変数を設定してからクリアできます（ライフサイクルフックでアクセスできます）。次に、カスタムゲッターでは、この目標を依存関係として登録できます。</p>
<p>最後にしなければならないことは、これらのライフサイクルフックをすべてのコンポーネントの一部にすることです。これをプロジェクト全体でグローバルミックスインを使用して行うことができます。</p>
<p> // ...（コードの残りの部分は元のテキストと同じです）</p>
<p>ここで、最初の例を実行すると、1秒あたりの数を増やすカウンターが表示されます。</p>
<p> // ...（コードの残りの部分は元のテキストと同じです）</p>
<h3 id="思考実験の終わり">思考実験の終わり</h3>
<p>最初の問題を解決しましたが、これは主に思考実験であることを忘れないでください。削除されたプロジェクトやアンインストールされたコンポーネントインスタンスの処理など、いくつかの機能がありません。また、コンポーネントインスタンスのプロパティ名は、LocalStorageに保存されているプロジェクト名と同じである必要があるなど、いくつかの制限があります。とはいえ、主な目標は、Vue Responsiveシステムが舞台裏でどのように機能し、それを最大限に活用するかをよりよく理解することです。</p></keys.length>

以上がVueでLocalStorageをリアクティブにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。