简易版vue框架

Vue 是构建用户界面的渐进式框架：可以从插值用起，再逐步加指令、组件、路由。 它靠数据驱动和组件化工作。如果过去习惯用 jQuery 改 DOM，学 Vue 时先放下「手动找节点」的思路——绑定一旦建立，改数据，视图会跟着更新。

下面带你搭一个简易版 Vue：先完成模板插值 {{ }}、v-text 和 v-model，体会双向绑定。源码在 https://gitee.com/yuguoxy/vue-core.git。

一、要实现的效果

输入框改数据，页面上的插值和 v-text 同步变；改数据，输入框也同步。动图如下：

二、需要掌握的技术

• 面向对象：用 class 拆职责；
• 数据劫持（getter / setter 或 Proxy）；
• 观察者模式；
• 正则解析指令和插值；
• 递归遍历 DOM 与嵌套数据。

MVVM：Model 是数据，View 是页面，ViewModel 把两者连起来。数据变 → 视图更新；视图输入 → 写回数据。

核心类按这张流程拆：Vue、Observer、Dep、Watcher、Compiler。

三、五类怎么配合

1. Vue 核心类
   1. 接收选项数据
   2. data 注入 Vue 实例（供 Compiler 使用）
   3. 调用 Observer，实现数据劫持
   4. 调用 Compiler 解析指令与模板插值
2. Observer 类
   1. 数据劫持，把 $data 中的成员转换成 getter/setter
   2. 初始化 Dep
   3. 在 getter 中添加依赖 Watcher
   4. 在 setter 中通知更新页面
3. Compiler 类
   1. 负责解析指令 / 插值表达式
4. Watcher 类
   更新页面
   1. 每个节点对应一个 Watcher
   2. 节点编译时实例化，实例保存到 Dep
5. Dep 类
   收集依赖 Watcher
   通知更新

四、源码和代码图示

仓库：https://gitee.com/yuguoxy/vue-core.git。对照下面这张结构图读类之间的调用关系：

一句话总结：简易 Vue 就是 MVVM：Observer 劫持数据，Compiler 解析模板，Dep 收集 Watcher，数据一变就通知视图。