日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
 

  
  
  
  
new Vue({
  
  
  
  
  el: "#counter",
  
  
  
  
  data: () => ({
  
  
  
  
    counter: localStorage.getItem("counter")
  
  
  
  
  }),
  
  
  
  
  computed: {
  
  
  
  
    even() {
  
  
  
  
      return this.counter % 2 == 0;
  
  
  
  
    }
  
  
  
  
  },
  
  
  
  
  template: `

  
  
  
  
    
Counter: {{ counter }}
  
  
  
  
    
Counter is {{ even ? 'even' : 'odd' }}
  
  
  
  
  

 
 
 
 

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

盡管Vue.js實例中的 counter 屬性是響應式的，但它不會因為我們更改了它在 localStorage 中的來源而更改。

有多種解決方案，最好的也許是使用Vuex，并保持存儲值與 localStorage 同步。但如果我們需要像本例中那樣簡單的東西呢?我們要深入了解一下Vue.js的響應式系統(tǒng)是如何工作的。

Vue 中的響應式

當Vue初始化組件實例時，它將觀察data選項。這意味著它將遍歷數(shù)據(jù)中的所有屬性，并使用 Object.defineProperty 將它們轉(zhuǎn)換為getter/setter。通過為每個屬性設置自定義設置器，Vue可以知道屬性何時發(fā)生更改，并且可以通知需要對更改做出反應的依賴者。它如何知道哪些依賴者依賴于一個屬性?通過接入getters，它可以在計算的屬性、觀察者函數(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 < 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 不響應?因為它不是具有屬性的對象。

但是等一下，我們也不能用數(shù)組定義getter和setter，但Vue中的數(shù)組仍然是反應式的。這是因為數(shù)組在Vue中是一種特殊情況。為了擁有響應式的數(shù)組，Vue在后臺重寫了數(shù)組方法，并與Vue的響應式系統(tǒng)進行了修補。

我們可以對 localStorage 做類似的事情嗎?

覆蓋localStorage函數(shù)

首先嘗試通過覆蓋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);
  
  
  
  

  
  
  
  
  // 調(diào)用原始函數(shù) 
  
  
  
  
  return getItem.call(localStorage, key);
  
  
  
  
};
  
  
  
  

  
  
  
  
const setItem = window.localStorage.setItem;
  
  
  
  
localStorage.setItem = (key, value) => {
  
  
  
  
  console.info("Setting", key, value);
  
  
  
  

  
  
  
  
  // 更新相關(guān)Vue實例中的值
  
  
  
  
  if (storeItemSubscribers[key]) {
  
  
  
  
    storeItemSubscribers[key].forEach((dep) => {
  
  
  
  
      if (dep.hasOwnProperty(key)) dep[key] = value;
  
  
  
  
    });
  
  
  
  
  }
  
  
  
  

  
  
  
  
  // 調(diào)用原始函數(shù) 
  
  
  
  
  setItem.call(localStorage, key, value);
  
  
  
  
};
 
 
 
 

 
 
 
 

  
  
  
  
new Vue({
  
  
  
  
  el: "#counter",
  
  
  
  
  data: function() {
  
  
  
  
    return {
  
  
  
  
      counter: localStorage.getItem("counter", this) // 我們現(xiàn)在需要傳遞“this”
  
  
  
  
    }
  
  
  
  
  },
  
  
  
  
  computed: {
  
  
  
  
    even() {
  
  
  
  
      return this.counter % 2 == 0;
  
  
  
  
    }
  
  
  
  
  },
  
  
  
  
  template: `

  
  
  
  
    
Counter: {{ counter }}
  
  
  
  
    
Counter is {{ even ? 'even' : 'odd' }}