前端面试题目总结（Vue）

jasmine_qiqi

已于 2022-05-05 09:53:20 修改

阅读量1.3k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端八股文文章标签： vue 前端面试

于 2022-05-03 12:31:36 首次发布

MVVM是Model-View-ViewModel的简写，Model就是模型，对应Vue中的Data中的属性，View就是视图，对应template模板，ViewModel就是Vue实例，它有两个方向，一个是把Model中的数据挂载到ViewModel上，自动渲染到View中。一个View数据变化时，Model也会跟着更新，这样就实现了数据双向绑定的过程。
MVVM的好处就是：
1、实现数据双向绑定，减少View和Model的耦合性
2、不用再手写DOM，让程序员更加关注数据的变化
3、数据频繁更新时，复用DOM，优化性能。

MVC是Model-View-Controller的简写，Model对后端数据，View对应视图，Controller对应控制器，MVC的工作原理就是：用户在视图页面发出请求时，就会通知路由，路由就找到对应的控制器，控制器就会把后端的数据传给前端，响应用户。
MVC和MVVM中的M和V是一样的，只不过把C中的页面逻辑视图抽离出来给了前端，变成VM，这样实现了数据双向绑定，所以说，MVVM是MVC的改进版，
最大的区别就是：
1、MVC是单向的，MVVM是双向的。
2、MVVM解决了MVC中产生的大量的DOM操作，提高了开发效率
3、在数据频繁更新的时候，采用了虚拟DOM，减少过度渲染，提高性能。

响应式：当渲染视图时使用到了一个数据，当这个数据变化时，视图就会响应是否更新，这就叫做响应式。
VUE的响应式原理的核心是Obejct.defineProperty
简单来说，Vue会通过Observe对data中的所有属性进行检测，然后通过Obejct.defineProperty对data的所有属性进行一个数据劫持，当获取数据时，对数据进行一个依赖的收集，当更新数据时，就会通知对应的依赖进行视图更新。
如果数据类型是对象的话，就会调用this,walk()这个方法，内部就会通过DefineReactive对数据循环，定义响应式，核心就是通过Obejct.defineProperty对数据进行劫持并监听。
如果数据类型是数组的话，就要用到函数劫持的方法，先定义好原型方法，改变数组的方法有7种，分别是pop、push、shift、unshift、splice、sort、reverse。然后数组通过原型链调用我们自己定义的方法，实现数组更新，通知更新视图。如果数组里面有对象的话，就用Obeserve进行检测。
Vue3.0就不用Obejct.defineProperty来实现响应式，而是通过Proxy来实现，直接检测数组，不用再用到函数劫持。

vue通过数据劫持结合订阅者-发布者实现的数据双向绑定原理。
简单来说，就是vue会利用Obsever对数据进行检测，然后利用Object.defineProerty对data中的所有属性进行一个重新定义，对数据的获取和设置进行数据劫持，获取数据时，对数据进行一个依赖收集，就叫做订阅者（Watcher），数据更新后，就会通知订阅者更新视图。最后通过Complie解析器，来解析模板命令，把属性转为数据，绑定更新函数，添加到绑定数据的订阅者，一旦数据变化，就通知订阅者，更新视图。
简单来说就三个步骤：
1、实现一个监听器（Obsever），对数据进行劫持和监听，数据变化时，通知订阅者
2、实现一个订阅者（Watcher）,收集通知并调用对应的函数，进行视图更新
3、实现一个解析器（Complie），解析命令，把属性转为数据，并初始化视图模板。