关于 vue 的原理主要有两个重要内容，分别是 mvvm 数据双向绑定原理，和 响应式原理
MVC（Model-View-Controller）：
- Model（模型）：表示应用程序的数据和业务逻辑。
- View（视图）：负责展示数据给用户，并且接受用户的输入。
- Controller（控制器）：负责处理用户的输入和操作，当用户与页面产生交互的时候开始工作，然后调用model 层修改model
- view 和 model 应用了观察者模式，当 model 层发生改变的时候它会通知有关的view 层更新
- 【箭头方向统一的三角形】
- view -> controller ->model -> view
- 缺点：view 层和 model 层 耦合在一起，当项目逻辑复杂是，会造成代码混乱。
MVP（Model-View-Presenter）：
- Model（模型）：同样表示应用程序的数据和业务逻辑。
- View（视图）：负责展示数据给用户，并且接受用户的输入。
- Presenter（主持人） ：将 model 的变化和view 的变化绑定在一起，(1) 实现 view 和 model 同步更新，(2) 实现 view 和 model 的解藕，还包含了其他的响应逻辑
- view -> presenter
- presenter -> view
- presenter -> model【没有model-presenter 的箭头】
MVVM（Model-View-ViewModel）：
- Model（模型）：同样表示应用程序的数据和业务逻辑。
- View（视图）：负责展示数据给用户，并且接受用户的输入。
- ViewModel（视图模型）：负责将模型的数据转换为视图所需的格式，并且处理视图的用户交互。视图模型通过数据绑定与视图进行连接。
- MVVM 模式通常利用双向数据绑定来实现视图和视图模型之间的通信。
- 思想和 mvp 是相同的，不过通过双向数据绑定，将 view 和model 的同步更新自动化了。
- model 发生变化，viewmodel 会自动更新
- viewmodel 变化了， view 也会自动更新
vue 中 mvvm 数据双向绑定原理/响应式原理
本质【数据劫持】+【发布订阅模式】
- 数据劫持 Observer
- vue2 使用 Object.definedProperty
- vue3 使用 proxy
- 第一步，就是把所有的变量变成响应式对象，都能够触发对应的 getter 和 setter
- vue 会创建一个 dep 对象，存储当前属性的所有 watcher 对象【dep 类似于发布订阅中的那个存储所有事件的数组】【watcher 对象类似于发布订阅中的事件名称】
- 【依赖收集】当属性的 getter 被访问时，watcher 对象将会被添加到 dep 中【相当于订阅发布中的 on 方法】
- 当属性的 setter 被调用时，dep 中所有 watcher 对象将会被通知执行更新【相当于发布订阅中的 emit 方法】
- 在数据劫持的步骤进行依赖收集
- observer 监听自己的 model 数据变化
- compile 模版编译
- 将vue模版编译成渲染函数【h 函数】
- vue 将模版中的数据绑定语法（如 {{}} 和 v-model）转换为对数据的 getter/setter 的调用
- 对每个指令对应的节点绑定更新函数【相当于发布订阅中的回调函数】
- 添加监听数据的订阅者，数据变动时，收到通知，更新视图
- Watcher 监听器
- 对应发布/订阅模式中的订阅者【就是 on(''change-name", fn) 中的 change-name这个方法】
- 在自身实例化时往属性订阅器 dep 里添加自己
- 自身有一个更新函数
- dep.notice 通知时，调用自身的 update 方法，并触发 compile绑定的回调
- 利用 watcher 搭起 observer 和 compile 之间的通信桥梁
- 达到 数据变化 -> 视图更新，视图交互变化-> 数据 model 变化的双向绑定效果