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


Posted in Javascript onJuly 14, 2020

响应式是Vue.js的最大特色之一。如果你不知道幕后情况,它也是最神秘的地方之一。例如,为什么它不能用于对象和数组,而不能用于诸如 localStorage 之类的其他东西?

如何在Vue中使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中使localStorage具有响应式(思想实验)

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响应式在幕后的工作方式并充分利用这一点,因此,我希望你能从所有这些事情中受益。

到此这篇关于如何在Vue中使localStorage具有响应式的文章就介绍到这了,更多相关Vue localStorage响应式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
jQuery与其它库冲突的解决方法
Jun 25 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
javaScript实现一个队列的方法
Jul 14 #Javascript
0基础学习前端开发的一些建议
Jul 14 #Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 #Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 #Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 #Javascript
You might like
php笔记之:文章中图片处理的使用
2013/04/26 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
详解JavaScript RegExp对象
2017/02/04 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
js实现转动骰子模型
2019/10/24 Javascript
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Django跨域请求原理及实现代码
2020/11/14 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
医药专业推荐信
2013/11/15 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
网络管理专业求职信
2014/03/15 职场文书
公司年终奖分配方案
2014/06/16 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
节约用电通知
2015/04/25 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers