響應式是vue的最大特色之一。如果你不知道幕後情況，它也是最神秘的地方之一。例如，為什麼它不能用於物件和陣列，不能用於諸如 localstorage 之類的其他東西？
讓我們回答這個問題，在解決這個問題時，讓vue響應式與 localstorage 一起使用。
如果執行以下**，則會看到計數器顯示為靜態值，並且不會像我們期望的那樣發生變化，這是因為setinterval在 localstorage 中更改了該值。
new vue(),
computed:
},template: `
counter: }
counter is }
` }); 複製**// some-other-file.js setinterval(() => , 1000); 複製**儘管vue例項中的 counter 屬性是響應式的，但它不會因為我們更改了它在 localstorage 中的**而更改。 有多種解決方案，最好的也許是使用vuex，並保持儲存值與 localstorage 同步。但如果我們需要像本例中那樣簡單的東西呢？我們要深入了解一下vue的響應式系統是如何工作的。 vue 中的響應式 當vue初始化元件例項時，它將觀察data選項。這意味著它將遍歷資料中的所有屬性，並使用 object.defineproperty 將它們轉換為getter/setter。通過為每個屬性設定自定義設定器，vue可以知道屬性何時發生更改，並且可以通知需要對更改做出反應的依賴者。它如何知道哪些依賴者依賴於乙個屬性？通過接入getters，它可以在計算的屬性、觀察者函式或渲染函式訪問資料屬性時進行註冊。 // core/instance/state.js function initdata () 複製**// core/observer/index.js export function observe (value)
export class observer
walk (obj) }}
export function definereactive (obj, key, …) ,
set(newval) })}
複製**所以，為什麼 localstorage 不響應？因為它不是具有屬性的物件。
但是等一下，我們也不能用陣列定義getter和setter，但vue中的陣列仍然是反應式的。這是因為陣列在vue中是一種特殊情況。為了擁有響應式的陣列，vue在後台重寫了陣列方法，並與vue的響應式系統進行了修補。
我們可以對 localstorage 做類似的事情嗎？
覆蓋localstorage函式
首先嘗試通過覆蓋localstorage方法來修復最初的示例，以跟蹤哪些元件例項請求了localstorage專案。
// localstorage專案鍵與依賴它的vue例項列表之間的對映。
const storeitemsubscribers = {};
const getitem = window.localstorage.getitem;
localstorage.getitem = (key, target) => ;
const setitem = window.localstorage.setitem;
localstorage.setitem = (key, value) => );
}// 呼叫原始函式
setitem.call(localstorage, key, value);
};複製**new vue(
},computed:
},template: `
counter: }
counter is }
當它們被建立時，它們會評估函式。這將觸發依賴關係的集合。
當他們被通知他們所依賴的乙個值發生變化時，他們會重新執行他們的函式。這將最終重新計算乙個計算出的屬性或重新渲染整個元件。
在觀察者呼叫其負責的函式之前，有乙個重要的步驟發生了：他們將自己設定為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) => ;
const setitem = window.localstorage.setitem;
localstorage.setitem = (key, value) => );
}// 呼叫原始函式
setitem.call(localstorage, key, value);
};vue.mixin(,
created()
});複製**現在，當我們執行第乙個示例時，我們將獲得乙個計數器，該計數器每秒增加乙個數字。
new vue(),
computed:
},template: `
counter: }
counter is }
` }); 複製**setinterval(() => , 1000); 複製**我們的思想實驗結束 當我們解決了最初的問題時，請記住這主要是乙個思想實驗。它缺少一些功能，例如處理已刪除的專案和未安裝的元件例項。它還具有一些限制，例如元件例項的屬性名稱需要與儲存在 localstorage 中的專案相同的名稱。就是說，主要目標是更好地了解vue響應式在幕後的工作方式並充分利用這一點，因此，我希望你能從所有這些事情中受益。
機器裝置（dfs）
時間限制 難度 2 描述 alpha 公司設計出一種節能的機器裝置。它的內部結構是由 n 個齒輪組成。整個機器裝置有 乙個驅動齒輪，當啟動它時，它立即按 10,000 圈 小時轉速順時針轉動，然後它又帶動與它相切 的齒輪反方向，即逆時針轉動。齒輪之間互相作用，每個齒輪都可能驅動著多個齒輪，最終帶動 ...
機器裝置（深搜）
機器裝置 時間限制 1000 ms 記憶體限制 65535 kb 難度 2 描述alpha 公司設計出一種節能的機器裝置。它的內部結構是由 n 個齒輪組成。整個機器裝置有 乙個驅動齒輪，當啟動它時，它立即按 10,000 圈 小時轉速順時針轉動，然後它又帶動與它相切 的齒輪反方向，即逆時針轉動。齒輪...
zzuli1927 機器裝置
alpha 公司設計出一種節能的機器裝置。它的內部結構是由 n 個齒輪組成。整個機器裝置有 乙個驅動齒輪，當啟動它時，它立即按 10,000 圈 小時轉速順時針轉動，然後它又帶動與它相切 的齒輪反方向，即逆時針轉動。齒輪之間互相作用，每個齒輪都可能驅動著多個齒輪，最終帶動 乙個工作齒輪完成相應的任務...