关于 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【viewmodel 变化更新 view 的原理】
- 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 监听器【view 变化 更新 viewmodel】
- 对应发布/订阅模式中的订阅者【就是 on(''change-name", fn) 中的 change-name这个方法】
- 在自身实例化时往属性订阅器 dep 里添加自己
- 自身有一个更新函数
- dep.notice 通知时,调用自身的 update 方法,并触发 compile绑定的回调
- 利用 watcher 搭起 observer 和 compile 之间的通信桥梁
- 达到 数据变化 -> 视图更新,视图交互变化-> 数据 model 变化的双向绑定效果