VUE简介

vue官网：https://cn.vuejs.org/

vue分为选项式与组合式

• 选项式: 类似于 React 的类组件

• 组合式: 类似于 React 的函数组件

vue响应式设计原理

受MVVM设计模式启发，并不完全遵照MVVM设计模式的设计

MVVM设计如下：

参与者:

• view: 视图层（页面）

• view model: 视图模型（控制层），是一个用于沟通 view 和 数据 model 的 桥梁，是一个用于控制的对象

• model: 数据模型

图中的箭头:

• 双箭头实线 databinding: view 页面发生数据变化会通知 viewmodel 更新数据；viewmodel 内数据发生改变会通知 view 更新视图

• viewmodel->model实线: 通过控制层能够修改model中的数据

• model->viewmodel虚线: model数据层为viewmodel提供数

vue的响应式设计如下：

参与者:

• virtual dom tree(虚拟文档树)：vue会创建一个和页面文档树一摸一样的一组虚拟文档树存放在内存中

• Data的setter和getter：Data 是vue中的一个对象 它包含 getter 和 setter 访问器，本质上是两个方法，用于对数据进行访问和赋值

• watcher：观察者 监视器，当数据data的setter方法被调用时 或某个依赖数据被访问时 会通知它

• Component Render Function: 组件的渲染函数

参与者的关系描述:

• 虚拟文档书 -> Data: 页面需求数据或需要设置数据就访问 Data 中的 getter 或 setter

• Data -> watcher: data 通过 getter 收集有依赖的数据时或 通过 setter 修改数据时 会通知 watcher

• watcher -> Component render function: watcher 收到通知后 触发组件的渲染函数

• component render function -> 虚拟文档树: 重新渲染虚拟文档树