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

如果運(yùn)行以下代碼，你會發(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ù)屬性時進(jìn)行註冊。

 // 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)用者訂閱到該屬性的進(jìn)一步更改。但它如何知道是誰進(jìn)行了調(diào)用？當(dāng)我們獲取數(shù)據(jù)屬性時，它的getter 函數(shù)沒有任何關(guān)於調(diào)用者是誰的輸入。 Getter 函數(shù)沒有輸入。它如何知道將誰註冊為依賴項？</p><p>每個數(shù)據(jù)屬性都維護(hù)一個其依賴項列表，這些依賴項需要在一個<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)它們被通知到它們依賴的值已更改時，它們會重新運(yùn)行其函數(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)部機(jī)制。但是，我們可以使用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)我們運(yùn)行初始示例時，我們將得到一個每秒增加數(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)文章！