vue响应式原理图解

• 讲解vue的响应式原理的文章有很多，而且大部分都很详细，但是由于代码量较多，很多人看着看着就搞不懂了，本文旨在根据原理图梳理整理逻辑，明确响应式执行的过程。

• 对比流程图进行描述，查看是请结合流程图。为了方便理解响应式分为两个阶段

  1. 初始化渲染视图
  2. 数据修改触发视图更新

初始化渲染视图

1. 绑定data监听data中数据的变化读取触发get,修改触发set
2. 创建Dep，目的是为了收集数据更新的方法（watcher）
3. 创建watcher渲染视图，watcher中储存的是更新dom方法
4. 真正的流程从这里开始，当视图开始渲染时会用到watch中的get方法
5. watch的get方法内部会把更新数据的方法保存在Dep.target，同时调用渲染视图的方法更新视图
6. 更新视图时会读取data中的数据从而触发data数据中的get方法
7. get方法内部会调用addDep方法,把Dep.target存到subs数组中,也就是把更新数据的watcher存到了subs中,这样dep里面就收集了所有更新数据的watch
8. 初始化渲染阶段结束

• 总的来说初始化阶段，做了data中数据的监听，以及把watcher（更新数据的方法）存放到dep中，当数据被修改时触发set方法，方便再次调用dep中的watcher更新数据。

数据修改触发视图更新

1. 当data中的数据被修改时，会触发data数据监听的set方法
2. set方法内部调用notify方法遍历subs（存放watcher的数组）依次调用更新数据的方法。
3. waticher内部调用update用来更新dom
4. vm._render方法渲染视图
5. 更新temelate模板
6. 渲染完成

• 大概的流程就是这些了，只是针对自己的理解大概描述了一下，文章比较粗糙，希望对你能有所帮助。
• 前端知识总结 (撰文不易，点赞鼓励)