Vue面试题原理探究

总结Vue常见的面试题原理探究

目录

1. 对MVVM原理的理解
2. 响应式数据的原理
3. vue中是如何检测数组变化
4. 为何vue采用异步渲染
5. nextTick实现原理
6. Vue中Computed的特点

1.对MVVM原理的理解

 传统的MVC:指用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据，将结果返回给前端，页面重新渲染。

MVVM:传统的前端会将数据手动渲染到页面上，MVVM模式不需要用户收到操作dom元素，将数据绑定到viewmodel层上，会自动将数据渲染到页面中，视图变化会通知viewmodel层更新数据，viewmodel就是我们mvvm模式中的桥梁。

2.响应式数据的原理

1.核心点：

object.defineProperty

2.默认vue在初始化数据时，会给data中的属性使用object.defineProperty重新定义所有属性，当页面取到对应属性时，会进行依赖收集（收集当前组件的watcher）,如果属性发生变化会通知相关依赖进行更新操作。

                  拦截属性的获取，进行依赖收集

               拦截属性的更新操作，对相关依赖进行通知

3.Vue中是如何检测数组变化？数组方法（push,pop,shift,unshift,splice,sort,reverse）

理解：使用函数劫持的方式，重写了数组的方法；

          Vue将data中的数组，进行了原型链重写，指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次进行监控(用observeArray)。

4.为何Vue采用异步渲染？

理解：vue是组件级更新

 因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能考虑，vue会在本轮数据更新后，再去异步更新视图。

 5.nextTick实现原理？

理解：nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列，所以这个nextTick方法就是异步方法。

6.Vue中computed的特点

理解：默认computed也是一个watcher，是具备缓存的，只要当依赖的属性发生变化时才会更新视图。

computed、watch、method区别：

1.computed可以让我们很好的监听多个数据或者一个数据来维护返回一个状态值，只要其中一个或多个数据发生变化，则会重新计算整个函数体，computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同时会出发实时计算

2.Vue通过watch选项提供一个更通用的方法，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作

watch模式没有computed模式简单，但watch比较适合做异步的操作。

总结：computed是在HTML DOM加载后马上执行的，如赋值；

methods则必须要有一定的触发条件才能执行，如点击事件；

watch用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。

 

分享来自b站上up主的视频的学习笔记：https://space.bilibili.com/508420770?from=search&seid=803957988300998200

谢谢，侵权立删。