浅谈Vue 数据响应式原理


Posted in Javascript onMay 07, 2018

前言

Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程。

本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray()。

改造数据

我们先来尝试写一个函数,用于改造对象:

为什么要先写这个函数呢? 因为改造数据是一个最基础也是最重要的步骤,之后所有的步骤都会依赖这一步。

// 代码 1.1
function defineReactive (obj,key,val) {
 Object.defineProperty(obj,key,{
  enumerable: true,
  configurable: true,
  get: function () {
   return val;
  },
  set: function (newVal) {
   //判断新值与旧值是否相等
   //判断的后半段是为了验证新值与旧值都为NaN的情况 NaN不等于自身
   if(newVal === val || (newVal !== newVal && value !== value)){
    return ;
   }
   val = newVal;
  }
 });
}

例如const obj = {},然后再调用defineReactive(obj,'a',2)方法,此时在函数内,val=2,然后每次获取obj.a的值的时候都是获取val的值,设置obj.a的时候也是设置val的值。(每次调用defineReactive都会产生一个闭包保存了val的值);

流程讨论

经过验证之后,发现这个函数确实可以使用的。然后我们来讨论一下响应的流程:

浅谈Vue 数据响应式原理

  1. 输入数据
  2. 改造数据(defineReactive())
  3. 如果数据变动 => 触发事件

我们来看第三步,数据变动如何触发之后的事件呢?仔细思考一下,如果要改变数据,那么必须先set数据,那么我们直接set()里面添加方法就ok了呀。

然后还有一个重要问题:

浅谈Vue 数据响应式原理

依赖收集

我们怎么知道数据改变之后要触发的是什么事件呢?在Vue中:

使用数据 => 视图; 使用了数据来渲染视图,那么在获取数据的时候收集依赖是最佳的时机,Vue在改造数据属性的时候生成一个Dep实例,用于收集依赖。

// 代码 1.2
class Dep {
 constructor(){
  //订阅的信息
  this.subs = [];
 }

 addSub(sub){
  this.subs.push(sub);
 }

 removeSub (sub) {
  remove(this.subs, sub);
 }

 //此方法的作用等同于 this.subs.push(Watcher);
 depend(){
  if (Dep.target) {
   Dep.target.addDep(this);
  }
 }
 //这个方法就是发布通知了 告诉你 有改变啦
 notify(){
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update();
  }
 }
}
Dep.target = null;

代码1.2就是Dep的部分代码,暂时只需要知道2个方法的作用就可以了

  1. depend() --- 可以理解为收集依赖的事件,不考虑其他方面的话 功能等同于addSub()
  2. notify() --- 这个方法更为直观了,执行所有依赖的update()方法。就是之后的改变视图啊 等等。

本篇主要讨论数据响应的过程,不深入讨论 Watcher类,所以Dep中的方法知道作用就可以了。

然后就是改变代码1.1了

//代码 1.3
function defineReactive (obj,key,val) {
 const dep = new Dep();

 Object.defineProperty(obj,key,{
  enumerable: true,
  configurable: true,
  get: function () {
   if(Dep.target){
    //收集依赖 等同于 dep.addSub(Dep.target)
    dep.depend()
   }
   return val;
  },
  set: function (newVal) {
   if(newVal === val || (newVal !== newVal && val !== val)){
    return ;
   }
   val = newVal;
   //发布改变
   dep.notify();
  }
 });
}

这代码中有一个疑点,Dep.target是什么?为什么要有Dep.target才会收集依赖呢?

  1. Dep是一个类,Dep.target是类的属性,并不是dep实例的属性。
  2. Dep类在全局可用,所以Dep.target在全局能访问到,可以任意改变它的值。
  3. get这个方法使用很平常,不可能每次使用获取数据值的时候都去调用dep.depend()。
  4. dep.depend()实际上就是dep.addSub(Dep.target)。
  5. 那么最好方法就是,在使用之前把Dep.target设置成某个对象,在订阅完成之后设置Dep.target = null。

验证

是时候来验证一波代码的可用性了

//代码 1.4

const obj = {};//这一句是不是感觉很熟悉 就相当于初始化vue的data ---- data:{obj:{}};

//低配的不能再低配的watcher对象(源码中是一个类,我这用一个对象代替了)
const watcher = {
 addDep:function (dep) {
  dep.addSub(this);
 },
 update:function(){
  html();
 }
}
//假装这个是渲染页面的
function html () {
 document.querySelector('body').innerHTML = obj.html;
}
defineReactive(obj,'html','how are you');//定义响应式的数据

Dep.target = watcher;
html();//第一次渲染界面
Dep.target = null;

此时浏览器上的界面是这样的

浅谈Vue 数据响应式原理

然后在下打开了控制台开始调试,输入:

obj.html = 'I am fine thank you'

然后就发现,按下回车的那一瞬间,奇迹发生了,页面变成了

浅谈Vue 数据响应式原理

结尾

Vue数据响应的设计模式和订阅发布模式有一点像,但是不同,每一个dep实例就是一个订阅中心,每一次发布都会把所有的订阅全部发布出去。

Vue的响应式原理其实还有很大一部分,本文主要讨论了Vue是如何让数据进行响应,但是实际上,一般的数据都是很多的,一个数据被多处使用,改变数据之后观察新值,如何观察、如何订阅、如何调度,都还有很大一部分没有讨论。主要的三个类Dep(收集依赖)、Observer(观察数据)、Watcher(订阅者,若数据有变化通知订阅者),都只提了一点点。

之前写有一篇Vue响应式----数组变异方法,针对Vue中对数组的改造进行讨论。当然之后有更多其他的文章,整个数据响应流程还有很多内容,三个主要的类都还没有讨论完。

其实阅读源码不仅仅是为了知道源码是如何工作的,更重要的是学习作者的思路与方法,我写的文章都不长,希望自己能够每次专注一个点,能够真真实实领悟到这一个点的原理。当然也想控制阅读时间,免得大家看到一半就关闭了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
js不常见操作运算符总结
Nov 20 Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
vue实现个人信息查看和密码修改功能
May 06 #Javascript
基于vue-element组件实现音乐播放器功能
May 06 #Javascript
VueJs组件之父子通讯的方式
May 06 #Javascript
vue自动化表单实例分析
May 06 #Javascript
You might like
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python 识别图片中的文字信息方法
2018/05/10 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
奉献爱心演讲稿
2014/09/04 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
Redis实现一个账号只能登录一个设备
2022/04/19 Redis