前端攻城狮该了解的 Vue.2x 响应式原理

原创 2017年11月13日 00:00:00


本文来自作者 大师兄 在 GitChat 上分享「Vue.2x 源码分析之响应式原理」,阅读原文」查看交流实录

文末高能

编辑 | 黑石

原本文章的标题叫《源码解析》,不过后来一想还是以学习的态度写合适一点。在没有彻底掌握源码中每一个代码之前,说“解析”有点标题党了。

我们都知道 Vue 是一个非常典型的 MVVM 框架,它的核心功能:

  1. 双向数据绑定系统

  2. 组件化开发系统

本文我们就聊聊双向数据绑定,不管你是学过或者没学过,我相信看完本文你都会对 vue 有一个比较简单明确的了解。不过如果哪块有错误,还望指出。

很多朋友说自己读不懂,索性就“不敢”去读。要我说凡事均要去尝试,不尝试永远没有读懂的机会,如果你试着读了,并且坚持了,那你就真的能读懂。

读源码也是有技巧的,我的技巧就是: 抓住主线,从宏观到微观。

我们不能一开始就要求自己读懂所有的细节,基本不现实;最好是能找到一条主线,先把大体流程结构摸清楚,再深入到细节,逐项击破,形成对源码整体的认识。

比如,我们都知道 Vue 中更新数据后会采用 virtual DOM(虚拟dom)的方式更新 dom。

这个时候,如果你不了解 virtual DOM,那么听我一句“暂且不要去研究内部具体实现,因为这会使你丧失主线”,而你仅仅需要知道 virtual DOM 分为三个步骤:

  1. createElement( ): 用 JavaScript 对象(虚拟树) 描述 真实 DOM 对象(真实树)

  2. diff(oldNode, newNode) : 对比新旧两个虚拟树的区别,收集差异

  3. patch( ) : 将差异应用到真实 DOM 树

回过头我们再去研究这个分支,仅此而已。

上图对于学习过 Vue 的朋友来说应该不陌生吧,来自 Vue 官网深入响应式原理,建议先看图一分钟。

为了说明原理,我们会把虚拟 dom 这块用 fragment 来代替(这个是1.x版本的实现)。

并且只考虑数据为对象的情况。记住今天的主线:搞清楚响应式原理,实现一个简单的 MVVM 框架。

由一个例子开始:

template:

javascript:

我们要解决的问题有:

如何将 data 中的数据渲染到真实的宿主环境中?

template 是如何被编译成真实环境中可用的 HTML 的?

如何通过“响应式”修改数据?

计算属性 getWeChatblog 如何和 data 中的数据绑定的?

带着这些问题开始我们 Vues 的开发。尽量和 Vue 代码保持一致。下面是目录结构:

入口文件:

export 构造函数 Vues,不清楚 ES6 中 module 可以可以点这里

初始化

进入到 ./instance/index.js 就可以看到 Vues 构造函数

其实就是调用 this._init(options),我们先不看这个函数是做什么的,这里有一个疑惑点,我们并没有在 Vues 构造函数内部申明 _init() 函数呀,那是因为我们调用了一个 initMixin 函数,我们来看看此函数:

ok,原来 _init() 是在这里定义的,在 Vues 的原型上扩展了此方法。Vue也用了这种形式。

在 _init() 首先调用了 initState(this) :

但是这里有个问题,从代码中可看出监听的数据对象是 $options.data,每次需要更新视图,则必须通过 vm._data.dsx= '前端开发大师兄';这样的方式来改变数据。

这显然不符合 Vue 中的赋值方式,我们所期望的调用方式应该是这样的:  vm.dsx = '前端开发大师兄';

所以这里需要给 Vues 实例添加一个属性代理的方法 _proxyData(),使访问 vm 的属性代理为访问 vm._data 的属性,方法代码如下:

我们初始化计算属性 computed,具体就是调用了函数 _initComputed(vm),来看看代码:

我们可以看出我们已经两次用到同一个方法——Object.defineProperty(),这就是 Vue 实现响应式数据的利器之一。举个栗子来说明。

我们为对象a 通过该方法定义了一个b属性,然后定义了 set 和 get 属性,这样我们给b 赋值就会触发它的 set 属性,我们获取值就会触发它的 get 属性。

这样我们就可以劫持数据,然后执行我们的操作。详细点可以看这里。

observe

这是我们第一个重点,observe 很明显我们会用到观察者模式,事实上Vue也是这么干的。我们看一下 observe() 做了什么?

就是做了类型判断,之后就直接实例化 Oberver ,参数为 data 对象。

官网的 Reactivity in Depth 上有这么句话:

When you pass a plain JavaScript object to a Vue instance as its data
option, Vue.js will walk through all of its properties and convert
them to getter/setters

The getter/setters are invisible to the user, but under the hood they
enable Vue.js to perform dependency-tracking and change-notification
when properties are accessed or modified

observe 使 data 变成“发布者”,watcher 是订阅者,订阅 data 的变化。那如何使 data 变为“发布者”呢?

当然是我们的利器—-Object.defineProperty() ,将数据对象 data 的属性转换为访问器属性。看看我们的代码:

我们遍历 data 对象的所有可配置属性,最终调用了 defineReactive() 函数。

将需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 set 和 get 。

先看看 defineReactive() 的我们是怎么实现的:

这个地方有一个值得思考的点,如果修改一个数组的成员,该成员是一个对象,那只需要递归对数组的成员进行双向绑定即可。

但这时候出现了一个问题,如果我们进行 pop、push 等操作的时候,push 进去的对象根本没有进行过双向绑定,更别说 pop 了,那么我们如何监听数组的这些变化呢?

Vue.js 提供的方法是重写 push、pop、shift、unshift、splice、sort、reverse 这七个数组方法。

修改数组原型方法的代码可以参考observer/array.js 以及 observer/index.js。

还有就是利用 vue.set() ,借用官方的 API

get 的方法主要用来进行依赖收集,就是添加订阅者。

所以我们只要在最开始进行一次 render,那么所有被渲染所依赖的 data 中的数据就会被 getter 收集到 Dep 的 subs 中去。

set 方法会在对象被修改的时候触发(不存在添加属性的情况,添加属性请用Vue.set),这时候 set 会通知闭包中的 Dep,Dep 中有一些订阅了这个对象改变的 Watcher 观察者对象,Dep 会通知 Watcher 对象更新视图。

我们用一个简单的栗子来说明观察者模式:

那应用到我们这里就是:每个 data 属性值在 defineReactive 函数监听处理的时候,添加一个主题对象,当 data 属性发生改变,通过 set 函数去通知所有的观察者们。

 那么如何添加观察者们呢,就是在 complie 函数编译 template 时,通过初始化 value 值,触发 set 函数,在 set 函数中为主题对象添加观察者。有点难理解?直接看代码就明白了。

ok,我们继续。看看我们的 Dep :

那么你可能有疑问了。。谁是订阅者。。对,没错就是 Watcher。。一旦 dep.notify()
就遍历订阅者,也就是 Watcher,并调用他的 update() 方法。

Watcher

如何实现一个 Watcher,通过上面的分析我可以确定得要一个 update() 方法。见下图:

很关键的一个地方就是 this.value = this.get() ,这个就是我们之前说的最开始要进行一次 render,我们看 get() 实现:

这个最关键了,主要做了以下几件事:

  1. 把当前 watcher 赋值给 Dep.target

  2. 获取 value 值就会触发 Oberver 中定义的 get

  3. 执行 dep.append() 添加订阅者

  4. 重新将 Dep.target 赋值为 null

  5. 返回 vaule 值

关于 notify

当监听的数据赋值就会被 set 拦截,然后执行 dep.notify() ,遍历订阅者(watcher)执行其 update() 方法,update 调用的其实是 this.run() 自己的 run 方法。我们看看:

有一个值得注意的地方,this.cb.call(this.vm, value, oldVal); 这个 cb 是什么?没错就是我们在编译 template 的时候为每一个指令绑定的更新 dom 的函数 。

最后对 watcher 做一个总结:

  1. 每次调用 run() 的时候会触发相应属性的 get

  2. get 里面会触发 dep.depend(),继而触发这里的 addDep

  3. 假如相应属性的 dep.id 已经在当前 watcher 的 depIds 里,说明不是一个新的属性,仅仅是改变了其值而已。

    则不需要将当前 watcher 添加到该属性的 dep 里

  4. 假如相应属性是新的属性,则将当前watcher添加到新属性的dep里,如通过 vm.child = {name: 'a'} 改变了 child.name 的值,child.name 就是个新属性。

    则需要将当前watcher(child.name)加入到新的 child.name 的 dep 里,因为此时 child.name 是个新值,之前的 set,dep 都已经失效,如果不把 watcher 加入到新的 child.name 的dep中。

    通过 child.name = xxx 赋值的时候,对应的 watcher 就收不到通知,等于失效了。

  5. 每个子属性的 watcher 在添加到子属性的 dep 的同时,也会添加到父属性的 dep。

  6. 监听子属性的同时监听父属性的变更,这样,父属性改变时,子属性的 watcher 也能收到通知进行 update。

    这一步是在 this.get() --> this.getVMVal() 里面完成,forEach 时会从父级开始取值,间接调用了它的 get,触发 addDep(),在整个 forEach 过程,当前 wacher 都会加入到每个父级过程属性的 dep。

    例如:当前 watcher 的是 'child.child.name', 那么 child, child.child, child.child.name 这三个属性的 dep 都会加入当前watcher。

到时候看看 Compile 了。

Compile

还记得在 _init() 函数最后那行代码吗?

new Compile ,看看做了什么?

注释说的很明白,就不做解释。看看如何转化 fragment :

就是遍历子节点添加到 fragment 。

接下来我们就会对 fragment 节点包括子节点遍历,判断其节点类型,然后调用对应的解析函数解析其中的指令。

我们只看一个 compile:

内置的指令处理方法:

最终都调用同一个方法bind() ,我们先看看它是做了什么?

  1. 获取对应指令的更新方法,并执行

  2. new Watcher,在回调函数执行 updaterFn

对于第一条,在执行 updaterFn 的时候会调用 this._getVMVal(vm, exp) :

很简单,就是获取对应的数据返回。我们看一个text类型的更新函数:

这个也是没毛病吧?ok。

第二条,new Watcher,在回调函数执行 updaterFn。还记得之前讲Watcher时提过一句:

还没记住,我就再贴一次图了

哈哈哈,明白了吧。那这个cb啥时执行呢?

当我们修改了数据就会触发对应的set ,然后就会调用 dep.notify();,通知订阅者,再调用订阅者的 update() 方法,update() 方法就会调用 this.run( ) ,run() 就会执行下面这一句:

最后补充,input 的 v-model 双向数据绑定,其实就是监听了 input 事件,还是贴代码:

在 input 事件回调执行 _setVMVal() 方法重新设置一次值。最后再贴一次代码,感觉我贴了好多,不过都是为了把事情说清楚。

到这我们就完成了一个缩减版的 Vue,当然 Vue 功能远远不止这些。我们这只是凤毛麟角。

学会这个对于你看真正的 Vue 源码帮助绝对很大,因为逻辑都是相似的。最后再看看下图,回味一下整个过程。

篇幅比较长,有时还很罗嗦,当然我只是想更清楚的讲解,真怕漏掉那个难点。

此次分享的所有源码均上传 git https://github.com/GGwujun/Vues.git

Over. Thanks.

近期热文

前端工程师“应试”指南

如何用 Node.js 爬虫?

两款敏捷工具,治好你碎片化交付硬伤

改做人工智能之前,90%的人都没能给自己定位

想入行 AI,别让那些技术培训坑了你...


请给一个不学 Vue 的理由

如果非要让我说一个不学 Vue 的理由,可能是它的写法太方便了……

「阅读原文」看交流实录,你想知道的都在这里

版权声明:本文为GitChat作者的原创文章,未经 GitChat 允许不得转载。

相关文章推荐

Vue.js(version 2)的时代已到来,前端攻城狮你准备好了吗?-------- 一、

轻量化的前端UI框架—–Vue.js本文拿vue对比其他前端框架,介绍它的强大之处,我会列出相应的实例供大家参考,具体功能可以参考官方API: Virtual DOM(虚拟DOM) 组件化应用 Vu...

vue2项目,前端写请求拦截器和响应式拦截器

很可能进了个假互联网公司,遇到堆假后台,拦截器沦落到前端写。。。 import axios from 'axios' import vue from 'vue' import store from ...

vue2.x响应式原理,vue与react响应式简单对比

实现的最终目标const demo = new Vue({ data: { text: "before", }, // 对应的template 为 {{text}} rende...
  • SirM2z
  • SirM2z
  • 2017年05月05日 13:16
  • 1540

Vue.js学习 Item12 – 内部响应式原理探究

深入响应式原理大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这让状态管理非常简单且直观,不过理解它的原理也很重要...

Vue的响应式原理

下面的是一张来自Vue官网的图片:如何追踪变化??当把一个普通的JavaScript对象传递给Vue实例的data选项,Vue将遍历这个对象的所有属性,并且利用Object.definePropert...
  • Dear_Mr
  • Dear_Mr
  • 2017年05月15日 23:09
  • 416

Vue.js内部响应式原理探究

深入vue响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这让状态管理非常简单且直观,不过理解它的原...

Vue.js深入响应式原理

原文地址:http://vuejs.org.cn/guide/reactivity.html 因工作需要用到Vue.js,所以看了一下相关知识。 深入响应式原理 大部分的基础内容我们已经讲到了...

基于 vue2 的响应式基础组件(滚动条)

基于 vue2 的响应式基础组件(滚动条)本文章是个人开源项目 vue2do,主页地址是: https://zen0822.github.io,可以的话请帮我 star 啊,因为听说腾讯有github...

2017年版 前端函数式攻城指南 超清

  • 2017年04月12日 13:56
  • 1.08MB
  • 下载

前端小白系列(2)—— 适配与响应式

讲分页的相关制作前,博主还是先填下自己在背景那挖的坑吧。 首先是适配。在移动互联网时代,基本上企业都希望自己的网页可以很好的在移动设备上跑,所以做适配 很重要。关于适配方案,博主采用的是根据设备宽度除...
  • imLagre
  • imLagre
  • 2017年03月01日 23:14
  • 196
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端攻城狮该了解的 Vue.2x 响应式原理
举报原因:
原因补充:

(最多只允许输入30个字)