MVC和MVVM的区别 & vue的虚拟DOM的理解

Posted 2023-02-16

参考技术A MVC: M,即model,指数据层 V,指view, 即视图层 C, controller,控制器
View层发起数据请求，Controller层接到请求后，接收参数，把命令传向Model层，Model层处理数据后，把数据传回controller,而controller把数据传回客户端，也就是view层
典型代表： nodejs的Egg框架， php的ThinkPHP框架都是使用的MVC模式
MVVM: M: model,数据层 V: view，视图层，即UI , VM （ViewModel）是视图层和数据层的中间层
典型代表： Vue框架
Vue的双向数据绑定就得益于MVVM框架， 视图层改变，底层封装好的VM层会更新数据，而数据改变，VM层会更新视图

一、虚拟DOM就是一个JS对象，用它来描述真实DOM
二、为什么要用虚拟DOM
越多的真实dom操作，越损耗性能
而用虚拟dom操作数据要大大的减少性能损耗，提高渲染效率
二、虚拟DOM的渲染流程
1、获取数据
2、根据数据创建VDOM （相当于给对象赋值）
3、根据VDOM渲染生成真实DOM ( 根据createElement(‘DIV’) )
4、当数据发生改变后，又会生成新的VDOM
5、通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后再进行真实DOM渲染，
一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’