浅谈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 相关文章推荐
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
浅谈React碰到v-if
Nov 04 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 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原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php环境下利用session防止页面重复刷新的具体实现
2014/01/09 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
酒店总经理欢迎词
2014/01/08 职场文书
优秀实习生感言
2014/03/01 职场文书
安全宣传标语口号
2014/06/06 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
新郎新娘答谢词
2015/01/04 职场文书
运动会入场词
2015/07/18 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏