如何使局部存儲在VUE中反應性

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

如果運行以下代碼，你會發現計數器顯示為靜態值，不會像預期的那樣因間隔改變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 實例內的counter屬性是響應式的，但僅僅因為我們在localStorage 中更改了它的來源，它並不會改變。

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

Vue 中的響應式

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

 // 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 不是響應式的呢？<strong>因為它不是具有屬性的對象。</strong></p><p>但是等等。我們也不能用數組定義getter 和setter，但在Vue 中數組仍然是響應式的。這是因為數組在Vue 中是一個特例。為了擁有響應式數組，Vue 在幕後重寫了數組方法，並將它們與Vue 的響應式系統整合在一起。</p><p>我們可以對localStorage 做類似的事情嗎？</p><h3 id="重寫localStorage-函數">重寫localStorage 函數</h3><p>首先，我們可以通過重寫localStorage 方法來跟踪哪些組件實例請求了localStorage 項目，從而修復我們最初的示例。</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> // 調用原始函數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> // 調用原始函數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 會將調用者訂閱到該屬性的進一步更改。但它如何知道是誰進行了調用？當我們獲取數據屬性時，它的getter 函數沒有任何關於調用者是誰的輸入。 Getter 函數沒有輸入。它如何知道將誰註冊為依賴項？</p><p>每個數據屬性都維護一個其依賴項列表，這些依賴項需要在一個<code>Dep</code>類中做出反應。如果我們更深入地研究這個類，我們可以看到，每當註冊依賴項時，依賴項本身就已經在一個靜態目標變量中定義了。這個目標是由一個迄今為止神秘的<code>Watcher</code>類設置的。事實上，當數據屬性發生變化時，這些觀察者將被實際通知，它們將啟動組件的重新渲染或計算屬性的重新計算。</p><p>但是，再說一次，它們是誰？</p><p>當Vue 使數據選項可觀察時，它還會為每個計算屬性函數以及所有觀察函數（不應與<code>Watcher</code>類混淆）和每個組件實例的渲染函數創建觀察者。觀察者就像這些函數的伴侶。它們主要做兩件事：</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> 。這兩個鉤子在初始化數據選項之前和之後觸發，因此我們可以設置，然後清除一個具有對當前組件實例的引用的目標變量（我們可以在生命週期鉤子中訪問它）。然後，在我們的自定義getter 中，我們可以將此目標註冊為依賴項。</p><p>我們必須做的最後一件事是使這些生命週期鉤子成為我們所有組件的一部分。我們可以為整個項目使用全局mixin 來做到這一點。</p><p> // ... (其餘代碼與原文相同)</p><p>現在，當我們運行初始示例時，我們將得到一個每秒增加數字的計數器。</p><p> // ... (其餘代碼與原文相同)</p><h3 id="我們的思想實驗的結束">我們的思想實驗的結束</h3><p>雖然我們解決了最初的問題，但請記住，這主要是一個思想實驗。它缺少一些功能，例如處理已刪除的項目和已卸載的組件實例。它也有一些限制，例如組件實例的屬性名稱需要與存儲在localStorage 中的項目名稱相同。也就是說，主要目標是更好地了解Vue 響應式系統在幕後是如何工作的，並充分利用它，所以我希望這就是你從這一切中獲得的東西。</p>

以上是如何使局部存儲在VUE中反應性的詳細內容。更多資訊請關注PHP中文網其他相關文章！