我们在进行动态网站设计时,往往需要用到框架,下面介绍MVVM模式,响应式原理,MVVM的实现。
一、什么是MVVM
大家都知道vue.js遵循的是mvvm的设计理念,下面简要说明什么是mvvm。
采用分而治之思想,把不同的代码放到不同的模块当中,然后通过特定的逻辑联系到一起。
-
1、M:model、就是模型数据,普通的JS对象。
-
2、V:view、就是Dom。
-
3、VM:view-model、就是Vue,view和model不可以直接交互,需要通过VM联系到一起。
M 到 V(数据驱动视图):Data Bindings:通过数据绑定联系到一起。
V 到 M(视图影响数据):Dom Listeners:通过事件监听联系到一起。
只要数据进行了改变,同时视图也会同时更新。
理解了基本思想之后,我们要做什么才能实现VM呢?
-
1.首先,需要利用Object.defineProperty,将要观察的对象,转化成getter/setter,以便拦截对象赋值与取值操作,称之为Observer,也就是数据观察者;
-
2.需要将DOM解析,提取其中的指令与占位符,并赋与不同的操作,称之为Compile,也就是指令解析器;
-
3.需要将Compile的解析结果,与Observer所观察的对象连接起来,建立关系,在Observer观察到对象数据变化时,接收通知,同时更新DOM,称之为Watcher,也就是订阅者,它是Observer和Compile之间通信的桥梁;
-
4.最后,需要一个公共入口对象,接收配置,协调上述三者,称为vm,也就是Vue;