MVVM框架及实现原理

以你之姓@ 2022-03-02 20:05 453阅读 0赞

MVVM框架理解  
说起这个MVVM模型，就不得不说MVC框架。  
![在这里插入图片描述][20190318105215941.png]  
将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。  
整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！！

换句话说，View和Model之间随着业务量的不断庞大，会出现蜘蛛网一样难以处理的依赖关系，完全背离了开发所应该遵循的“开放封闭原则”。  
面对这个问题，MVVM框架就出现了，它与MVC框架的主要区别有两点：  
1、实现数据与视图的分离  
2、通过数据来驱动视图，开发者只需要关心数据变化，DOM操作被封装了。

![在这里插入图片描述][2019031811363889.png]  
可以看到MVVM分别指View，Model，View-Model，View通过View-Model的DOM Listeners将事件绑定到Model上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接桥的作用。  
**MVVM的实现原理：**  
MVVM的实现主要是三个核心点：  
响应式：vue如何监听data的属性变化  
模板解析：vue的模板是如何被解析的  
渲染：vue模板是如何被渲染成HTML的

**响应式**：  
对于MVVM来说，data一般是放在一个对象当中，就比如这样：  
![在这里插入图片描述][20190318114643869.png]  
当我们访问或修改obj的属性的时候，比如：  
![在这里插入图片描述][20190318114755806.png]  
但是这样的操作vue本身是没有办法感知到的，那么应该如何让vue知道我们进行了访问或是修改的操作呢？  
那就要使用Object.defineProperty  
![在这里插入图片描述][20190318114817952.png]  
通过Object.defineProperty将data里的每一个属性的访问与修改都变成了一个函数，在函数get和set中我们即可监听到data的属性发生了改变。  
**模板解析：**  
首先模板是什么？  
模板本质上是一串字符串，它看起来和html的格式很相像，实际上有很大的区别，因为模板本身还带有逻辑运算，比如v-if，v-for等等，但它最后还是要转换为html来显示。  
![在这里插入图片描述][20190318115213938.png]  
模板在vue中必须转换为JS代码，原因在于：在前端环境下，只有JS才是一个图灵完备语言，才能实现逻辑运算，以及渲染为html页面。  
这里就引出了vue中一个特别重要的函数——render render函数中的核心就是with函数。  
![在这里插入图片描述][20190318115553438.png]  
举个例子：  
![在这里插入图片描述][20190318115616127.png]  
with将obj这个对象放在了自己函数的作用域链的顶部，当执行下列函数时，就会自动到obj这个对象去寻找同名的属性。  
而在render函数中，with的用法是这样：  
![在这里插入图片描述][20190318120211991.png]  
![在这里插入图片描述][2019031812063671.png]  
![在这里插入图片描述][20190318145316331.png]  
在一开始，因为new操作符，所以this指向了vm，通过with我们将vm这个对象放在作用域链的顶部，因为在函数内部我们会多次调用vm内部的属性，所以使用with可以缩短变量长度，提供系统运行效率。  
其中的\_c函数表示的是创建一个新的html元素，其基本用法为：  
\_c(element,\{attrs\},\[children…\])  
其中的element表示所要创建的html元素类型，attrs表示所要创建的元素的属性，children表示该html元素的子元素。  
\_v函数表示创建一个文本节点，\_l函数表示创建一个数组。  
最终render函数返回的是一个虚拟DOM。

**如何将模板渲染为html**  
模板渲染为html分为两种情况，第一种是初次渲染的时候，第二种是渲染之后数据发生改变的时候，它们都需要调用updateComponent,其形式如下：  
![在这里插入图片描述][20190318154714847.png]  
首先读取当前的虚拟DOM——vm.\_vnode,判断其是否为空，若为空，则为初次渲染，将虚拟DOM全部渲染到所对应的容器当中（vm.$el），若不为空，则是数据发生了修改，通过响应式我们可以监听到这一情况，使用diff算法完成新旧对比并修改。

[20190318105215941.png]: /images/20220303/3ed24cf6887d4f70b91e5ac7ee17ad59.png?
[2019031811363889.png]: /images/20220303/684f1e327c5b4bac8c91384b20913723.png?
[20190318114643869.png]: /images/20220303/4625329e09424904985bcd4a1e58bc41.png
[20190318114755806.png]: /images/20220303/82c614614ff2433eb388005b589efd6e.png
[20190318114817952.png]: /images/20220303/22ea1c895c32421d9af08d70ebc2502d.png?
[20190318115213938.png]: /images/20220303/34643d2576e54dfbb9e3fd3b7f013b1e.png?
[20190318115553438.png]: /images/20220303/f441e16981954fcbb85a8893353f7d28.png
[20190318115616127.png]: /images/20220303/b30a5c7561364bf18ded6c818298be2a.png?
[20190318120211991.png]: /images/20220303/3a1bc68793fb4a05822535c3be888eec.png?
[2019031812063671.png]: /images/20220303/f8aacd6a9b9745738e3c0faf9fbc0ba0.png?
[20190318145316331.png]: /images/20220303/0dbb659f5c0f402a884b509abcf6c85a.png?
[20190318154714847.png]: /images/20220303/cdf277a2e6e84c04b50bf75889455e2e.png?