Vue2源码【1】Vue 的整体架构

本系列文章,主要是梳理一下 Vue 2.x 源码的一些脉络和总结一些值得学习的点。并不是像同话题下的文章带读者从0到1读懂源码。

如题首先讲讲 Vue 的整体架构。

Vue的核心就是数据驱动,而响应式等等机制只不过是其中的组成部分。

数据驱动的动机: 只关心数据的修改,让代码的逻辑更加清晰。Vue 根据数据的变动,代为去操作dom。

  • 整个vue整体架构就是想实现“数据驱动”:
    • 而响应式原理只是其中的一个重要模块。
    • 另外mvvm根据vnode更新视图也可以算是“数据驱动”的一部分
      • 比如首次构建+“异步更新”

基于此,我们再从一个更大的视角来看 Vue 的架构设计:

  • 【数据驱动】
    • 【mvvm】
      • 首次构建阶段
      • 异步更新
    • 【响应式原理】 = 数据劫持 + 观察者模式 = 依赖收集 + 派发更新 = defineReactive + 同时存在Dep.target
    • 【data以外的响应式原理】 原理同上
      • 比如props是响应式的
      • 另见我另外一篇博客,详细讲解各种
    • 【双向绑定】数据劫持,更新到input控件上 + 监听input控件的键入事件,同步到数据上
    • 【数据代理】(原理极其简单):数据劫持
文章目录