如何在Vue中使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 "htmlcode">

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


尽管Vue.js实例中的 counter 属性是响应式的，但它不会因为我们更改了它在 localStorage 中的来源而更改。
有多种解决方案，最好的也许是使用Vuex，并保持存储值与 localStorage 同步。但如果我们需要像本例中那样简单的东西呢"color: #ff0000">Vue 中的响应式
当Vue初始化组件实例时，它将观察data选项。这意味着它将遍历数据中的所有属性，并使用 Object.defineProperty 将它们转换为getter/setter。通过为每个属性设置自定义设置器，Vue可以知道属性何时发生更改，并且可以通知需要对更改做出反应的依赖者。它如何知道哪些依赖者依赖于一个属性"htmlcode">

// 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 不响应"color: #ff0000">覆盖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 "htmlcode">

setInterval(() => { 
 const counter = localStorage.getItem("counter"); 
 localStorage.setItem("counter", +counter + 1); 
}, 1000); 


在这个例子中，我们重新定义了 getItem 和 setItem，以便收集和通知依赖 localStorage 项目的组件。在新的 getItem 中，我们注意到哪个组件请求了哪个项目，在 setItems 中，我们联系所有请求该项目的组件，并重写它们的数据属性。
为了使上面的代码工作，我们必须向 getItem 传递一个对组件实例的引用，这就改变了它的函数签名。我们也不能再使用箭头函数了，因为否则我们就不会有正确的 this 值。
如果我们想做得更好，就必须更深入地挖掘。例如，我们如何在不显式传递依赖者的情况下跟踪它们"" src="/UploadFiles/2021-04-02/2020071415163361.jpg"> 
Vue如何收集依赖关系
为了获得启发，我们可以回到Vue的响应式系统。我们之前曾看到，访问数据属性时，数据属性的 getter 将使调用者订阅该属性的进一步更改。但是它怎么知道是谁做的调用呢"color: #ff0000">追踪谁调用了localStorage
我们无法完全做到这一点，因为我们无法使用Vue的内部机制。但是，我们可以使用Vue的想法，即观察者可以在调用其负责的函数之前，将目标设置为静态属性。我们能否在调用 localStorage 之前设置对组件实例的引用"htmlcode">

// 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 "htmlcode">

setInterval(() => { 
 const counter = localStorage.getItem("counter"); 
 localStorage.setItem("counter", +counter + 1); 
}, 1000); 


我们的思想实验结束
当我们解决了最初的问题时，请记住这主要是一个思想实验。它缺少一些功能，例如处理已删除的项目和未安装的组件实例。它还具有一些限制，例如组件实例的属性名称需要与存储在 localStorage 中的项目相同的名称。就是说，主要目标是更好地了解Vue响应式在幕后的工作方式并充分利用这一点，因此，我希望你能从所有这些事情中受益。

            
            上一篇：详解JavaScript 作用域

            下一篇：Jquery使用each函数实现遍历及数组处理