Vue 原理解析

2019-01-26 本文已影响1485人 grain先森

用vue也有很长一段时间，用它做过移动端项目 pc项目 SaaS平台等等，总体来说vue 还是相对于简单的、建立于良好的文档和开箱即用的脚手架, vue在前端框架的热度一直很高, 最近正好在研究vue的源码毕竟学习之路基本都是学轮子 -> 看源码 -> 造轮子 逐步精进来的, 网上有非常多的vue的原理解析的文章，可能我写的不算太好不过还是写下来作为一个积累和总结。

大概思路

vue的数据驱动主要实现建立在三个对象上Dep、Watcher、Compiler,

Dep 主要负责依赖的收集

Watcher 主要负责Dep和Compiler之间的联系

Compiler 可以理解为 virtual dom + patch 也就是负责视图层的渲染

可以用个简单的思维导图来说明下大概原理

1. getter、setter

首先我们可以看到通过Object.defineProperty为vm实例定义了一个getter、setter. 我们可以将两个分开来讲:

getter

getter: 主要是获取到对应的键值, 这里有一个步骤是先将原来的getter和setter提取出来，这一步主要是为了防止预定义的getter和setter，保证预定义getter、setter一样能够生效, 注意到有一步是判断Dep.target, 有的话就收集依赖了。还有一些对于数组的处理, 这里就不细述了。

setter

setter: 在setter函数中，主要是对相同的值的拦截，然后对于嵌套对象的重新observe，这里之所以会重新observe 是因为vue在每次响应了数据变化后，会清除掉所有的依赖，因此要重新建立, 至于为什么会重新建立我们会在下面大概说下, 当值发生变化时，最后会触发dep.notify(), 来触发依赖的升级.

2. 依赖的建立

在代码中我们可以看到依赖的建立是通过dep.depend()来完成的, 那这个过程是在什么时候完成的呢

其实我们可以看到在 mountComponent中会new 一个 watcher实例，还有就是有一个叫做updateComponent的函数产生,这一个函数的主要作用就是视图层渲染更新, new Watcher参数中的before会触发生命周期beforeUpdate的钩子，好了接下来我们来看下new Watcher的时候都发生了些什么?

watcher 构造器函数

我们能看到watcher在实例化的过程中会有大量属性，然后会根据是否是计算属性来进行判断, 我们这里先不去管计算属性, 直接就从最简单的data进行入手, 会触发watcher.get()

watcher.get

这里的getter 其实就是updateComponent 函数, 在updateComponent函数中会通过virtual dom 和 patch函数来进行视图层的更新和渲染。在分析template建立虚拟dom的过程中需要去获取vm的属性，因此会触发vm.getter函数pushTarget() // 将当前的watcher 实例设置为 Dep.target

然后会触发dep.depend()