百度云网站空间建设百度电话号码

关于 vue 的原理主要有两个重要内容，分别是 mvvm 数据双向绑定原理，和 响应式原理

1. MVC（Model-View-Controller）：

   • Model（模型）：表示应用程序的数据和业务逻辑。
   • View（视图）：负责展示数据给用户，并且接受用户的输入。
   • Controller（控制器）：负责处理用户的输入和操作，当用户与页面产生交互的时候开始工作，然后调用model 层修改model
   • view 和 model 应用了观察者模式，当 model 层发生改变的时候它会通知有关的view 层更新
   • 【箭头方向统一的三角形】
   • view -> controller ->model -> view
   • 缺点：view 层和 model 层 耦合在一起，当项目逻辑复杂是，会造成代码混乱。

2. MVP（Model-View-Presenter）：

   • Model（模型）：同样表示应用程序的数据和业务逻辑。
   • View（视图）：负责展示数据给用户，并且接受用户的输入。
   • Presenter（主持人）：将 model 的变化和view 的变化绑定在一起，(1) 实现 view 和 model 同步更新，(2) 实现 view 和 model 的解藕，还包含了其他的响应逻辑
   • view -> presenter 
   • presenter -> view
   • presenter -> model【没有model-presenter 的箭头】

3. MVVM（Model-View-ViewModel）：

   • Model（模型）：同样表示应用程序的数据和业务逻辑。
   • View（视图）：负责展示数据给用户，并且接受用户的输入。
   • ViewModel（视图模型）：负责将模型的数据转换为视图所需的格式，并且处理视图的用户交互。视图模型通过数据绑定与视图进行连接。
   • MVVM 模式通常利用双向数据绑定来实现视图和视图模型之间的通信。
   • 思想和 mvp 是相同的，不过通过双向数据绑定，将 view 和model 的同步更新自动化了。
     •  model 发生变化，viewmodel 会自动更新
     • viewmodel 变化了， view 也会自动更新

vue 中 mvvm 数据双向绑定原理/响应式原理

本质【数据劫持】+【发布订阅模式】

        注意【发布订阅模式】和【观察者模式】是有区别的

1. 数据劫持 Observer
   1. vue2 使用 Object.definedProperty
   2. vue3 使用 proxy
   3. 第一步，就是把所有的变量变成响应式对象，都能够触发对应的 getter 和 setter
   4. vue 会创建一个 dep 对象，存储当前属性的所有 watcher 对象【dep 类似于发布订阅中的那个存储所有事件的数组】【watcher 对象类似于发布订阅中的事件名称】
   5. 【依赖收集】当属性的 getter 被访问时，watcher 对象将会被添加到 dep 中【相当于订阅发布中的 on 方法】
   6. 当属性的 setter 被调用时，dep 中所有 watcher 对象将会被通知执行更新【相当于发布订阅中的 emit 方法】
   7. 在数据劫持的步骤进行依赖收集
   8. observer 监听自己的 model 数据变化
2. compile 模版编译
   1. 将vue模版编译成渲染函数【h 函数】
   2. vue 将模版中的数据绑定语法（如 {{}} 和 v-model）转换为对数据的 getter/setter 的调用
   3. 对每个指令对应的节点绑定更新函数【相当于发布订阅中的回调函数】
   4. 添加监听数据的订阅者，数据变动时，收到通知，更新视图
3. Watcher 监听器
   1. 对应发布/订阅模式中的订阅者【就是 on(''change-name", fn) 中的 change-name这个方法】
   2. 在自身实例化时往属性订阅器 dep 里添加自己
   3. 自身有一个更新函数
   4. dep.notice 通知时，调用自身的 update 方法，并触发 compile绑定的回调
   5. 利用 watcher 搭起 observer 和 compile 之间的通信桥梁
   6. 达到 数据变化 -> 视图更新，视图交互变化-> 数据 model 变化的双向绑定效果