对Vue原理的一些认识和简单实现

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

大概思路

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

Dep 主要负责依赖的收集
Watcher 主要负责Dep和Compiler之间的联系
Compiler 可以理解为 virtual dom + patch 也就是负责视图层的渲染

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

image.png

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()来完成的, 那这个过程是在什么时候完成的呢

mountComponet.png
其实我们可以看到在 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()

dep.depend

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

watcher.addDep

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

dep.addSub

最后通过subs来存储watcher

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

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

dep.notify
subs里面的都是收集到的watcher实例
watcher.update
这里我们看到会有一个queueWatcher的函数, 这个其实是将当前watcher 弄到一个tick中去，这块涉及到js eventLoop
机制这一块. 我们放到后续的文章去讲,到最后的话, 其实是会触发到watcher.run()
watcher.run & watcher.getAndInvoke
我们看到这个里面会有触发watcher.get(), 翻到上面的截图, 我们会发现get 会触发updateComponent 这时候就完成了整个视图层的更新。

一些问题

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

  
  image.png
  

  目前的话，其实还不太理解， 下次我会找个机会做个demo 尝试下

• vue是如何基于event loop实现的nextTick?
  这一块的话还是比较生疏，源码我会继续往下面看，到时候会写一篇关于js event loop的博文以及nextTick的实现来作为学习总结.

结语

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

参考

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