本系列文章,主要是梳理一下 Vue 2.x 源码的一些脉络和总结一些值得学习的点。并不是像同话题下的文章带读者从0到1读懂源码。
如题首先讲讲 Vue 的整体架构。
Vue的核心就是数据驱动,而响应式等等机制只不过是其中的组成部分。
数据驱动的动机: 只关心数据的修改,让代码的逻辑更加清晰。Vue 根据数据的变动,代为去操作dom。
- 整个vue整体架构就是想实现“数据驱动”:
- 而响应式原理只是其中的一个重要模块。
- 另外mvvm根据vnode更新视图也可以算是“数据驱动”的一部分
- 比如首次构建+“异步更新”
基于此,我们再从一个更大的视角来看 Vue 的架构设计:
- 【数据驱动】
- 【mvvm】
- 首次构建阶段
- 异步更新
- 【响应式原理】 = 数据劫持 + 观察者模式 = 依赖收集 + 派发更新 = defineReactive + 同时存在Dep.target
- 【data以外的响应式原理】 原理同上
- 比如props是响应式的
- 另见我另外一篇博客,详细讲解各种
- 【双向绑定】数据劫持,更新到input控件上 + 监听input控件的键入事件,同步到数据上
- 【数据代理】(原理极其简单):数据劫持
- 【mvvm】