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

大概思路

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

Dep 主要负责依赖的收集

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

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

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

Vue原理解析

image.png

1. getter、setter

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

Vue原理解析

getter

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

Vue原理解析

setter

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

2. 依赖的建立

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

Vue原理解析

mountComponet.png

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

Vue原理解析

watcher 构造器函数

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

Vue原理解析

watcher.get

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

然后会触发dep.depend()

Vue原理解析

dep.depend

这时候我们能看到Dep.target 其实就是当前的watcher实例.

Vue原理解析

watcher.addDep

这边有一个判断是防止重复依赖产生，最后就是dep.addSub()

Vue原理解析

dep.addSub

最后通过subs来存储watcher

3.属性变化后 依赖通知watcher进行update

还记得上面提到的setter吗？(不清楚的话，可以拉上去看下) setter会在属性值发生变化时，触发dep.notify()

Vue原理解析

dep.notify

subs里面的都是收集到的watcher实例

Vue原理解析

watcher.update

这里我们看到会有一个queueWatcher的函数, 这个其实是将当前watcher 弄到一个tick中去，这块涉及到js eventLoop

机制这一块. 我们放到后续的文章去讲,到最后的话, 其实是会触发到watcher.run()

Vue原理解析

watcher.run & watcher.getAndInvoke

我们看到这个里面会有触发watcher.get(), 翻到上面的截图, 我们会发现get 会触发updateComponent 这时候就完成了整个视图层的更新。一些问题

  • 为什么vue在每次都要清除一下已有的一些依赖
  • 其实这个问题我刚开始也很疑惑，既然依赖已经建立，那为什么还要清理掉又重新建立呢，所以我打开了google，找到了这样一个解释
Vue原理解析

  • image.png
  • 目前的话，其实还不太理解， 下次我会找个机会做个demo 尝试下
  • vue是如何基于event loop实现的nextTick?
  • 这一块的话还是比较生疏，源码我会继续往下面看，到时候会写一篇关于js event loop的博文以及nextTick的实现来作为学习总结.

结语

其实我觉得vue的原理基本上就相当于代理者模式 订阅发布模式来实现的, 说实话第一次看这种源码还挺懵逼的，不过我觉得看源码就要直奔主题，先把主枝干理清除，了解自己想要得到什么，整个过程就会清晰明了, 主要放一个自己的ts版的简单实现，写的很简陋，但是能够大概看出vue的原理，有兴趣的可以看下 ts版vue简易原理

参考

  • vue core
  • Vue.js 技术揭秘 // 这个是我在看源码后有一些不理解的问题google时候搜到的，写的非常好，不想直接看源码的可以直接看这个