Vue响应式原理Observer、Dep、Watcher理解


Posted in Javascript onJune 06, 2019

开篇

最近在学习Vue的源码,看了网上一些大神的博客,看起来感觉还是蛮吃力的。自己记录一下学习的理解,希望能够达到简单易懂,不看源码也能理解的效果?

Object.defineProperty

相信很多同学或多或少都了解Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象,会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。进而触发一些视图更新。举个栗子?

function defineReactive (obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.log('我被读了,我要不要做点什么好?');
      return val;
    },
    set: newVal => {
      if (val === newVal) {
        return;
      }
      val = newVal;
      console.log("数据被改变了,我要把新的值渲染到页面上去!");
    }
  })
}

let data = {
  text: 'hello world',
};

// 对data上的text属性进行绑定
defineReactive(data, 'text', data.text);

console.log(data.text); // 控制台输出 <我被读了,我要不要做点什么好?>
data.text = 'hello Vue'; // 控制台输出 <hello Vue && 数据被改变了,我要把新的值渲染到页面上去!>

Observer 「响应式」

Vue中用Observer类来管理上述响应式化Object.defineProperty的过程。我们可以用如下代码来描述,将this.data也就是我们在Vue代码中定义的data属性全部进行「响应式」绑定。

class Observer {
  constructor() {
    // 响应式绑定数据通过方法
   observe(this.data);
  }
}

export function observe (data) {
  const keys = Object.keys(data);
  for (let i = 0; i < keys.length; i++) {
    // 将data中我们定义的每个属性进行响应式绑定
    defineReactive(obj, keys[i]);
  }
}

Dep 「依赖管理」

什么是依赖?

相信没有看过源码或者刚接触Dep这个词的同学都会比较懵。那Dep究竟是用来做什么的呢? 我们通过defineReactive方法将data中的数据进行响应式后,虽然可以监听到数据的变化了,那我们怎么处理通知视图就更新呢?

Dep就是帮我们收集【究竟要通知到哪里的】。比如下面的代码案例,我们发现,虽然data中有text和message属性,但是只有message被渲染到页面上,至于text无论怎么变化都影响不到视图的展示,因此我们仅仅对message进行收集即可,可以避免一些无用的工作。

那这个时候message的Dep就收集到了一个依赖,这个依赖就是用来管理data中message变化的。

<div>
  <p>{{message}}</p>
</div>
data: {
  text: 'hello world',
  message: 'hello vue',
}

当使用watch属性时,也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化,message变化时我们就要通知到watch这个钩子,让它去执行回调函数。

这个时候message的Dep就收集到了两个依赖,第二个依赖就是用来管理watch中message变化的。

watch: {
  message: function (val, oldVal) {
    console.log('new: %s, old: %s', val, oldVal)
  },
}

当开发者自定义computed计算属性时,如下messageT属性,是依赖message的变化的。因此message变化时我们也要通知到computed,让它去执行回调函数。 这个时候message的Dep就收集到了三个依赖,这个依赖就是用来管理computed中message变化的。

computed: {
  messageT() {
    return this.message + '!';
  }
}

图示如下:一个属性可能有多个依赖,每个响应式数据都有一个Dep来管理它的依赖。

Vue响应式原理Observer、Dep、Watcher理解

如何收集依赖

我们如何知道data中的某个属性被使用了,答案就是Object.defineProperty,因为读取某个属性就会触发get方法。可以将代码进行如下改造:

function defineReactive (obj, key, val) {
  let Dep; // 依赖

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.log('我被读了,我要不要做点什么好?');
      // 被读取了,将这个依赖收集起来
      Dep.depend(); // 本次新增
      return val;
    },
    set: newVal => {
      if (val === newVal) {
        return;
      }
      val = newVal;
      // 被改变了,通知依赖去更新
      Dep.notify(); // 本次新增
      console.log("数据被改变了,我要把新的值渲染到页面上去!");
    }
  })
}

什么是依赖

那所谓的依赖究竟是什么呢?上面的图中已经暴露了答案,就是Watcher。

Watcher 「中介」

Watcher就是类似中介的角色,比如message就有三个中介,当message变化,就通知这三个中介,他们就去执行各自需要做的变化。

Watcher能够控制自己属于哪个,是data中的属性的还是watch,或者是computed,Watcher自己有统一的更新入口,只要你通知它,就会执行对应的更新方法。

因此我们可以推测出,Watcher必须要有的2个方法。一个就是通知变化,另一个就是被收集起来到Dep中去。

class Watcher {
  addDep() {
    // 我这个Watcher要被塞到Dep里去了~~
  },
  update() {
    // Dep通知我更新呢~~
  }, 
}

总结

回顾一下,Vue响应式原理的核心就是Observer、Dep、Watcher。

Observer中进行响应式的绑定,在数据被读的时候,触发get方法,执行Dep来收集依赖,也就是收集Watcher。

在数据被改的时候,触发set方法,通过对应的所有依赖(Watcher),去执行更新。比如watch和computed就执行开发者自定义的回调方法。

本篇文章属于入门篇,能够先简单的理解Observer、Dep、Watcher三者的作用和关系。后面会逐渐详细和深入,循序渐进的理解和学习。

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

Javascript 相关文章推荐
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
原生js通过一行代码实现简易轮播图
Jun 05 #Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 #Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
Node.js 路由的实现方法
Jun 05 #Javascript
You might like
乐信RP2100的电路分析和打磨
2021/03/02 无线电
精通php的十大要点(上)
2009/02/04 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
javascript求日期差的方法
2016/03/02 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
jupyter安装小结
2016/03/13 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python实现excel转sqlite的方法
2017/07/17 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python缩进长度是否统一
2020/08/02 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
改革共识倡议书
2014/08/29 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python