vue相关理论知识

目录

什么是MVVM

v-model实现数据双向绑定的原理

什么是数据代理，好处和原理是什么

什么是虚拟DOM，其实现的原理和优缺点是什么

---

什么是MVVM

MVVM的全称是Model-View-ViewModel。

Model：模型层。主要是指后端所传递的数据。

View：视图层。主要是指我们所能够看到的页面。

ViewModel：视图模型层。也就是指vue实例对象，是连接view和model之间的桥梁，它可以通过数据绑定将model层后台所传递的数据转化成我们所能看见的视图层，也可通过dom监听事件将视图层所改变的数据传递给model模型层。

v-model实现数据双向绑定的原理

v-model是vue数据双向绑定的一个指

令，它本质是不经过语法糖的。其实现双向绑定主要是通过View——Date来实现的。

当view层输入的数据发生改变时会影响Data的数据，当Data中的数据发生改变的时候，又会将数据更新到view视图层。

其主要的核心功能就是： modal层通过defineProperty来劫持并监听所有的属性，然后给属性都加上 setter 和 getter，一旦监听到页面中某个属性值发生变化，就会触发setter，这时就会通过编译模板文件为控件的v-model绑定相应事件，从而使得页面输入能实时更新相关data属性值。

什么是数据代理，好处和原理是什么

数据代理：通过VM对象来代理data对象中属性的操作(读/写)。

好处：可以更加方便的操作data中的数据。

基本原理：

1. 通过object.define.property把data对象中所以属性添加到VM上。
2. 为每一个添加到VM上的属性，都指定一个getter/setter。
3. 在getter/setter内部去操作(读/写)data中应对的属性。

什么是虚拟DOM，其实现的原理和优缺点是什么

虚拟DOM是js对真实DOM的抽象，状态变更时会记录两个DOM的差异性，最后把差异性更新到真实DOM中。

原理：

1. 通过js模拟真实DOM树，对真实DOM树进行抽象。
2. 通过diff算法比较两个虚拟DOM树之间的差异性。
3. 通过patch算法将两个虚拟DOM对象的差异性运用到真实DOM树上。

优点：

1. 保证性能下限：虚拟DOM可以通过diff找出最小差别，然后再通过patch批量将差异性运用到真实DOM上，所以比起原始的DOM操作虚拟DOM要友好很多，可以保证性能的下限。
2. 无需手动操作DOM：只需在view-model层写好代码逻辑，框架就会根据虚拟DOM和数据双向绑定，实现预期的视图，提高了开发效率。
3. 跨平台：虚拟DOM本质上是js对象，而DOM又与平台强相关，所以相比之下虚拟DOM能够进行更方便的跨平台操作，比如进行服务器的渲染，移动端的开发等。

缺点：

无法进行极致优化：在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化