思想實驗：如何在Vue中使localStorage具有響應式？
響應式是Vue.js的最大特色之一。如果你不知道幕後情況，它也是最神祕的地方之一。例如，爲什麼它不能用於對象和數組，而不能用於諸如 localStorage 之類的其他東西?
讓我們回答這個問題，在解決這個問題時，讓Vue響應式與 localStorage 一起使用。
如果運行以下代碼，則會看到計數器顯示爲靜態值，並且不會像我們期望的那樣發生變化，這是因爲setInterval在 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.js實例中的 counter 屬性是響應式的，但它不會因爲我們更改了它在 localStorage 中的來源而更改。
有多種解決方案，最好的也許是使用Vuex，並保持存儲值與 localStorage 同步。但如果我們需要像本例中那樣簡單的東西呢?我們要深入瞭解一下Vue.js的響應式系統是如何工作的。
Vue 中的響應式
當Vue初始化組件實例時，它將觀察data選項。這意味着它將遍歷數據中的所有屬性，並使用 Object.defineProperty 將它們轉換爲getter/setter。通過爲每個屬性設置自定義設置器，Vue可以知道屬性何時發生更改，並且可以通知需要對更改做出反應的依賴者。它如何知道哪些依賴者依賴於一個屬性?通過接入getters，它可以在計算的屬性、觀察者函數或渲染函數訪問數據屬性時進行註冊。
// 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 < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
}
export function defineReactive (obj, key, ...) {
const dep = new Dep()
// ...
Object.defineProperty(obj, key, {
// ...
get() {
// ...
dep.depend()
// ...
},
set(newVal) {
// ...
dep.notify()
}
})
}
所以，爲什麼 localStorage 不響應?因爲它不是具有屬性的對象。
但是等一下，我們也不能用數組定義getter和setter，但Vue中的數組仍然是反應式的。這是因爲數組在Vue中是一種特殊情況。爲了擁有響應式的數組，Vue在後臺重寫了數組方法，並與Vue的響應式系統進行了修補。
我們可以對 localStorage 做類似的事情嗎?
覆蓋localStorage函數
首先嚐試通過覆蓋localStorage方法來修復最初的示例，以跟蹤哪些組件實例請求了localStorage項目。
// LocalStorage項目鍵與依賴它的Vue實例列表之間的映射。
const storeItemSubscribers = {};
const getItem = window.localStorage.getItem;
localStorage.getItem = (key, target) => {
console.info("Getting", key);
// 收集依賴的Vue實例
if (!storeItemSubscribers[key]) storeItemSubscribers[key] = [];
if (target) storeItemSubscribers[key].push(target);
// 調用原始函數
return getItem.call(localStorage, key);
};
const setItem = window.localStorage.setItem;
localStorage.setItem = (key, value) => {
console.info("Setting", key, value);
// 更新相關Vue實例中的值
if (storeItemSubscribers[key]) {
storeItemSubscribers[key].forEach((dep) => {
if (dep.hasOwnProperty(key)) dep[key] = value;
});
}
// 調用原始函數
setItem.call(localStorage, key, value);
};
new Vue({
el: "#counter",
data: function() {
return {
counter: localStorage.getItem("counter", this) // 我們現在需要傳遞“this”
}
},
computed: {
even() {
return this.counter % 2 == 0;
}
},
template: `<div>
<div>Counter: {{ counter }}</div>
<div>Counter is {{ even ? 'even' : 'odd' }}</div>
</div>`
});
setInterval(() => {
const counter = localStorage.getItem("counter");
localStorage.setItem("counter", +counter + 1);
}, 1000);
在這個例子中，我們重新定義了 getItem 和 setItem，以便收集和通知依賴 localStorage 項目的組件。在新的 getItem 中，我們注意到哪個組件請求了哪個項目，在 setItems 中，我們聯繫所有請求該項目的組件，並重寫它們的數據屬性。
爲了使上面的代碼工作，我們必須向 getItem 傳遞一個對組件實例的引用，這就改變了它的函數簽名。我們也不能再使用箭頭函數了，因爲否則我們就不會有正確的 this 值。
如果我們想做得更好，就必須更深入地挖掘。例如，我們如何在不顯式傳遞依賴者的情況下跟蹤它們?
Vue如何收集依賴關係
爲了獲得啓發，我們可以回到Vue的響應式系統。我們之前曾看到，訪問數據屬性時，數據屬性的 getter 將使調用者訂閱該屬性的進一步更改。但是它怎麼知道是誰做的調用呢?當我們得到一個數據屬性時，它的 getter 函數沒有任何關於調用者是誰的輸入。Getter函數沒有輸入，它怎麼知道誰要註冊爲依賴者呢?
每個數據屬性維護一個需要在Dep類中進行響應的依賴項列表。如果我們在此類中進行更深入的研究，可以看到只要在註冊依賴項時就已經在靜態目標變量中定義了依賴項。這個目標是由一個非常神祕的Watche類確定的。實際上，當數據屬性更改時，將實際通知這些觀察程序，並且它們將啓動組件的重新渲染或計算屬性的重新計算。
但是，他們又是誰?
當Vue使 data 選項可觀察時，它還會爲每個計算出的屬性函數以及所有watch函數(不應與Watcher類混爲一談)以及每個組件實例的render函數創建watcher。觀察者就像這些函數的伴侶。他們主要做兩件事：
- 當它們被創建時，它們會評估函數。這將觸發依賴關係的集合。
- 當他們被通知他們所依賴的一個值發生變化時，他們會重新運行他們的函數。這將最終重新計算一個計算出的屬性或重新渲染整個組件。
在觀察者調用其負責的函數之前，有一個重要的步驟發生了：他們將自己設置爲Dep類中靜態變量的目標。這樣可以確保在訪問響應式數據屬性時將它們註冊爲從屬。
追蹤誰調用了localStorage
我們無法完全做到這一點，因爲我們無法使用Vue的內部機制。但是，我們可以使用Vue的想法，即觀察者可以在調用其負責的函數之前，將目標設置爲靜態屬性。我們能否在調用 localStorage 之前設置對組件實例的引用?
如果我們假設在設置 data 選項時調用了 localStorage，則可以將其插入 beforeCreate 和 created 中。這兩個掛鉤在初始化data選項之前和之後都會被觸發，因此我們可以設置一個目標變量，然後清除該變量，並引用當前組件實例(我們可以在生命週期掛鉤中訪問該實例)。然後，在我們的自定義獲取器中，我們可以將該目標註冊爲依賴項。
我們要做的最後一點是使這些生命週期掛鉤成爲我們所有組件的一部分，我們可以通過整個項目的全局混合來做到這一點。
// LocalStorage項目鍵與依賴它的Vue實例列表之間的映射
const storeItemSubscribers = {};
// 當前正在初始化的Vue實例
let target = undefined;
const getItem = window.localStorage.getItem;
localStorage.getItem = (key) => {
console.info("Getting", key);
// 收集依賴的Vue實例
if (!storeItemSubscribers[key]) storeItemSubscribers[key] = [];
if (target) storeItemSubscribers[key].push(target);
// 調用原始函數
return getItem.call(localStorage, key);
};
const setItem = window.localStorage.setItem;
localStorage.setItem = (key, value) => {
console.info("Setting", key, value);
// 更新相關Vue實例中的值
if (storeItemSubscribers[key]) {
storeItemSubscribers[key].forEach((dep) => {
if (dep.hasOwnProperty(key)) dep[key] = value;
});
}
// 調用原始函數
setItem.call(localStorage, key, value);
};
Vue.mixin({
beforeCreate() {
console.log("beforeCreate", this._uid);
target = this;
},
created() {
console.log("created", this._uid);
target = undefined;
}
});
現在，當我們運行第一個示例時，我們將獲得一個計數器，該計數器每秒增加一個數字。
new Vue({
el: "#counter",
data: () => ({
counter: localStorage.getItem("counter")
}),
computed: {
even() {
return this.counter % 2 == 0;
}
},
template: `<div class="component">
<div>Counter: {{ counter }}</div>
<div>Counter is {{ even ? 'even' : 'odd' }}</div>
</div>`
});
setInterval(() => {
const counter = localStorage.getItem("counter");
localStorage.setItem("counter", +counter + 1);
}, 1000);
我們的思想實驗結束
當我們解決了最初的問題時，請記住這主要是一個思想實驗。它缺少一些功能，例如處理已刪除的項目和未安裝的組件實例。它還具有一些限制，例如組件實例的屬性名稱需要與存儲在 localStorage 中的項目相同的名稱。就是說，主要目標是更好地瞭解Vue響應式在幕後的工作方式並充分利用這一點，因此，我希望你能從所有這些事情中受益。
【責任編輯：趙寧寧 TEL：（010）68476606】
