Vue.js 的響應(yīng)式系統(tǒng)是其核心優(yōu)勢之一，但對于不了解其底層機制的人來說，可能會感到神秘。例如，為什么它能與對象和數(shù)組一起工作，卻不能與其他東西（如 localStorage）一起工作？本文將解答這個問題，并演示如何讓 Vue 的響應(yīng)式系統(tǒng)與 localStorage 協(xié)同工作。

如果運行以下代碼，你會發(fā)現(xiàn)計數(shù)器顯示為靜態(tài)值，不會像預(yù)期的那樣因間隔改變 localStorage 中的值而變化：

new Vue({
  el: "#counter",
  data: () => ({
    counter: localStorage.getItem("counter")
  }),
  computed: {
    even() {
      return this.counter % 2 == 0;
    }
  },
  template: `<div>
    <div>Counter: {{ counter }}</div>
    <div>Counter is {{ even ? 'even' : 'odd' }}</div>
  </div>`
});

// some-other-file.js
setInterval(() => {
  const counter = localStorage.getItem("counter");
  localStorage.setItem("counter",  counter   1);
}, 1000);

雖然 Vue 實例內(nèi)的 counter 屬性是響應(yīng)式的，但僅僅因為我們在 localStorage 中更改了它的來源，它并不會改變。

解決這個問題的方法有很多，最好的方法可能是使用 Vuex 并保持存儲值與 localStorage 同步。但如果我們只需要像這個例子中一樣簡單的解決方案呢？我們必須深入了解 Vue 的響應(yīng)式系統(tǒng)的工作原理。

Vue 中的響應(yīng)式

當(dāng) Vue 初始化組件實例時，它會觀察 data 選項。這意味著它會遍歷 data 中的所有屬性，并使用 Object.defineProperty 將它們轉(zhuǎn)換為 getter/setter。通過為每個屬性設(shè)置自定義 setter，Vue 就能知道屬性何時發(fā)生變化，并可以通知需要對變化做出反應(yīng)的依賴項。它如何知道哪些依賴項依賴于某個屬性？通過利用 getter，它可以在計算屬性、觀察者函數(shù)或渲染函數(shù)訪問數(shù)據(jù)屬性時進行注冊。

// core/instance/state.js
function initData () {
  // ...
  observe(data)
}

// core/observer/index.js
export function observe (value) {
  // ...
  new Observer(value)
  // ...
}

export class Observer {
  // ...
  constructor (value) {
    // ...
    this.walk(value)
  }

  walk (obj) {
    const keys = Object.keys(obj)
    for (let i = 0; i 
<p>那么，為什么 localStorage 不是響應(yīng)式的呢？<strong>因為它不是具有屬性的對象。</strong></p>
<p>但是等等。我們也不能用數(shù)組定義 getter 和 setter，但在 Vue 中數(shù)組仍然是響應(yīng)式的。這是因為數(shù)組在 Vue 中是一個特例。為了擁有響應(yīng)式數(shù)組，Vue 在幕后重寫了數(shù)組方法，并將它們與 Vue 的響應(yīng)式系統(tǒng)整合在一起。</p>
<p>我們可以對 localStorage 做類似的事情嗎？</p>
<h3>重寫 localStorage 函數(shù)</h3>
<p>首先，我們可以通過重寫 localStorage 方法來跟蹤哪些組件實例請求了 localStorage 項目，從而修復(fù)我們最初的示例。</p>
<p>// localStorage 項目鍵與依賴它的 Vue 實例列表之間的映射
const storeItemSubscribers = {};</p>
<p>const getItem = window.localStorage.getItem;
localStorage.getItem = (key, target) => {
console.info("Getting", key);</p>
<p>// 收集依賴的 Vue 實例
if (!storeItemSubscribers[key]) storeItemSubscribers[key] = [];
if (target) storeItemSubscribers[key].push(target);</p>
<p>// 調(diào)用原始函數(shù)
return getItem.call(localStorage, key);
};</p>
<p>const setItem = window.localStorage.setItem;
localStorage.setItem = (key, value) => {
console.info("Setting", key, value);</p>
<p>// 更新依賴 Vue 實例中的值
if (storeItemSubscribers[key]) {
storeItemSubscribers[key].forEach((dep) => {
if (dep.hasOwnProperty(key)) dep[key] = value;
});
}</p>
<p>// 調(diào)用原始函數(shù)
setItem.call(localStorage, key, value);
};</p>
<p>// ... (其余代碼與原文相同)</p>
<p>在這個例子中，我們重新定義了 <code>getItem</code> 和 <code>setItem</code>，以便收集和通知依賴 localStorage 項目的組件。在新的 <code>getItem</code> 中，我們記錄了哪個組件請求了哪個項目，在 <code>setItem</code> 中，我們聯(lián)系所有請求該項目并重寫其數(shù)據(jù)屬性的組件。</p>
<p>為了使上面的代碼工作，我們必須將對組件實例的引用傳遞給 <code>getItem</code>，這會改變它的函數(shù)簽名。我們也不能再使用箭頭函數(shù)，否則我們將不會有正確的 <code>this</code> 值。</p>
<p>如果我們想做得更好，我們必須更深入地挖掘。例如，我們?nèi)绾卧诓伙@式地傳遞它們的情況下跟蹤依賴項？</p>
<h3>Vue 如何收集依賴項</h3>
<p>為了獲得靈感，我們可以回到 Vue 的響應(yīng)式系統(tǒng)。我們之前看到，當(dāng)訪問數(shù)據(jù)屬性時，數(shù)據(jù)屬性的 getter 會將調(diào)用者訂閱到該屬性的進一步更改。但它如何知道是誰進行了調(diào)用？當(dāng)我們獲取數(shù)據(jù)屬性時，它的 getter 函數(shù)沒有任何關(guān)于調(diào)用者是誰的輸入。Getter 函數(shù)沒有輸入。它如何知道將誰注冊為依賴項？</p>
<p>每個數(shù)據(jù)屬性都維護一個其依賴項列表，這些依賴項需要在一個 <code>Dep</code> 類中做出反應(yīng)。如果我們更深入地研究這個類，我們可以看到，每當(dāng)注冊依賴項時，依賴項本身就已經(jīng)在一個靜態(tài)目標(biāo)變量中定義了。這個目標(biāo)是由一個迄今為止神秘的 <code>Watcher</code> 類設(shè)置的。事實上，當(dāng)數(shù)據(jù)屬性發(fā)生變化時，這些觀察者將被實際通知，它們將啟動組件的重新渲染或計算屬性的重新計算。</p>
<p>但是，再說一次，它們是誰？</p>
<p>當(dāng) Vue 使數(shù)據(jù)選項可觀察時，它還會為每個計算屬性函數(shù)以及所有觀察函數(shù)（不應(yīng)與 <code>Watcher</code> 類混淆）和每個組件實例的渲染函數(shù)創(chuàng)建觀察者。觀察者就像這些函數(shù)的伴侶。它們主要做兩件事：</p>
<ol>
<li>
<strong>它們在創(chuàng)建時評估函數(shù)。</strong>這會觸發(fā)依賴項的收集。</li>
<li>
<strong>當(dāng)它們被通知到它們依賴的值已更改時，它們會重新運行其函數(shù)。</strong>這最終將重新計算計算屬性或重新渲染整個組件。</li>
</ol>
<p>在觀察者調(diào)用它們負(fù)責(zé)的函數(shù)之前，會發(fā)生一個重要的步驟：<strong>它們在 <code>Dep</code> 類中的靜態(tài)變量中將自身設(shè)置為目標(biāo)。</strong>這確保了當(dāng)訪問響應(yīng)式數(shù)據(jù)屬性時，它們會被注冊為依賴項。</p>
<h3>跟蹤誰調(diào)用了 localStorage</h3>
<p>我們不能完全做到這一點，因為我們無法訪問 Vue 的內(nèi)部機制。但是，我們可以使用 Vue 的思想，讓觀察者在調(diào)用它負(fù)責(zé)的函數(shù)之前，在一個靜態(tài)屬性中設(shè)置目標(biāo)。我們可以在調(diào)用 localStorage 之前設(shè)置對組件實例的引用嗎？</p>
<p>如果我們假設(shè)在設(shè)置數(shù)據(jù)選項時調(diào)用了 localStorage，那么我們可以掛接到 <code>beforeCreate</code> 和 <code>created</code>。這兩個鉤子在初始化數(shù)據(jù)選項之前和之后觸發(fā)，因此我們可以設(shè)置，然后清除一個具有對當(dāng)前組件實例的引用的目標(biāo)變量（我們可以在生命周期鉤子中訪問它）。然后，在我們的自定義 getter 中，我們可以將此目標(biāo)注冊為依賴項。</p>
<p>我們必須做的最后一件事是使這些生命周期鉤子成為我們所有組件的一部分。我們可以為整個項目使用全局 mixin 來做到這一點。</p>
<p>// ... (其余代碼與原文相同)</p>
<p>現(xiàn)在，當(dāng)我們運行初始示例時，我們將得到一個每秒增加數(shù)字的計數(shù)器。</p>
<p>// ... (其余代碼與原文相同)</p>
<h3>我們的思想實驗的結(jié)束</h3>
<p>雖然我們解決了最初的問題，但請記住，這主要是一個思想實驗。它缺少一些功能，例如處理已刪除的項目和已卸載的組件實例。它也有一些限制，例如組件實例的屬性名稱需要與存儲在 localStorage 中的項目名稱相同。也就是說，主要目標(biāo)是更好地了解 Vue 響應(yīng)式系統(tǒng)在幕后是如何工作的，并充分利用它，所以我希望這就是你從這一切中獲得的東西。</p>

以上是如何使局部存儲在VUE中反應(yīng)性的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！