对于 Vue MVVM 模式的详细解析
观察者,监视者,模板编译
前言
对于学习前端的朋友,Vue 框架应该是耳熟能详的。Vue 成为如今最火的框架,其 MVVM 模式也是让大家十分喜爱,本文仅解析其原理,并不是 Vue 的基础使用教学。
本文源码下载:https://github.com/li-car-fei/Vue-MVVM-Model
结构
先给出代码的结构,以及 MVVM 模式示例图
mvvm.js
在 mvvm.js 中,定义了 mvvm 类,即对应 vue 类,新建该实例,则对应于我们新建 vue 实例 new Vue()
新建 mvvm 实例对象时,我们需要对数据 data,计算属性 computed 进行数据劫持,通过 defineProperty 对传入的属性进行响应式绑定。
然后调用 observe(),对属性进行解析,给每个属性绑定一个 Dep,然后调用 compile(),对模板进行解析,把命令都解析出来并且给每一个命令添加一个 watcher,监听属性变化。
1 | //新建MVVM实例对象的构造函数 |
observer.js
在 observer.js 中,我们看到,对属性进行遍历劫持过程中,defineReactive()方法是最为关键的,它对每一个属性进行劫持分析并且深度递归。而在 defineProperty 之前给属性绑定 dep 作为监视者,在 set 中通过 dep.notify()通知 watcher 完成响应式的功能。同时,在 get 中 Dep.target 的判断也十分重要,这一步是后面 dep 与 watcher 进行关联的关键。
1 | //新建Observe实例 |
compile.js
compile 解析文档过程中,通过正则判断,node 节点类型判断的方式,从文档流之中解析出 vue 指令,然后给每一个 vue 指令绑定一个 watcher,在 watcher 之中有对应的更新视图的函数对应不同的更新方法,如 css 样式更新,html 内容更新,{{}}内容更新等
1 | //解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令替换数据,以及绑定相应的更新函数 |
watcher.js
最后我们来看 watcher.js 中对 watcher 的定义。在 new watcher 新建 watcher 实例时,势必要去获取 observer 劫持了的属性的值,以完成第一次视图渲染,而在此时将 Dep.target 赋值为当前的 watcher,如前面所说,在 observer 劫持的属性的 get 中判断 Dep.target,如果有指向,则完成两者的绑定
1 | //Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图 |
结语
此文对 Vue MVVM 模式做简要分析,并未使用 Vue 源码
欢迎大家一起交流学习:
编者 github 地址:传送
qq:1073490398
wechat:carfiedfeifei