思想实验：如何在Vue中使localStorage具有响应式？

 
 
 
 

  
  
  
  
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的响应式系统是如何工作的。

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: `

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