vue面试题整理

Vue面试题

1、你能讲一下mvvm吗？

MVVM是model-view-viewmodel的缩写，model代表数据模型，view代表UI组件，viewmodel是view和model的桥梁，数据会绑定到viewmodel层并自动将数据渲染到页面中，视图变化的时候会通知viewmodel层更新数据。

2、vue的生命周期？

beforeCreate  创建前 在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。
    created  创建后 可以做一些初始数据的获取，在当前阶段无法与DOM进行交互，如果非要想交互，可以通过vm.$nextTick来访问DOM。
    beforeMount  载入前 当前阶段虚拟DOM已经创建完成，即将开始渲染。可以对数据进行更改，不会触发updatad。
    mouted  载入后 真实的DOM挂载完毕，数据完成双向绑定，可以访问到DOM节点，使用￥refs属性对DOM进行操作。
    beforeUpdate  更新前 响应式数据发生更新，虚拟DOM重新渲染之前被触发，可以在当前阶段更新数据，不会造成重渲染。
    updated  更新后 当前阶段组件DOM已经更新完成，要注意的是避免在此期间更改数据，这可能会导致无限循环更新。
    beforeDestroy  销毁前 可以进行善后收尾工作，比如清楚计时器。
    destroyed  销毁后 这个时候只剩下了DOM空壳，组件已经拆解，数据绑定被移出，监听被移出，子实例也被销毁。

3、说一下Vue2.x响应是数据原理？

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

4、那你知道Vue3.x响应数据的远离吗？

Vue3.x改用proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有13种拦截方法。并且作为新标准将受到浏览器厂商持续的性能优化。
        4.1  Proxy只会代理对象的第一层，那么Vue3又是怎么处理这个问题？
    判断当前Reflect.get的返回值是否为Object，如果是则通过reactive方法做代理，这样就实现了深度观测。
        4.2  监测数组的时候可能触发多次get/set，那么如何防止触发呢？
    可以判断key是否为当前被代理对象的target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件的任意一个时，才能执行trigger。

5、Vue2.x中如何检测数组变化？

使用函数劫持的方法，重写了数组的方法，vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了检测数组变化。

6、nextTick的实现原理是什么？

在下次DOM更新循环结束之后执行延迟回调。nextTick主要使用了宏任务和微任务，根据执行环境分别采用
    Promise         MutationObserver       setImmediate       如果以上都不行采用setTimeout
    定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

7、接口请求一般放在那个生命周期中？

接口请求一般放在mounted中，但需要注意的是服务器端渲染时不支持mounted,需要放在created中。

8、你说话一下Computed和Watch？

computed本质上是一个具备缓存的watcher，依赖的属性发生变化时就会更新视图。适用于计算比较消耗性能的计算场景。
    watch没有缓存性，更多的时观察作用，可以监听某些数据回调。当我们需要深度监听对象中的属性时，可以打开deep：true，这样便会对对象中的每一项进行监听，会带来性能问题，优化可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销。

9、v-if和v-show的区别？

v-if当条件不成立时，不会渲染DOM元素；v-show操作的时样式的display，切换当前DOM的显示和隐藏。

10、组件中的data为什么是一个函数？

如果data是对象的话，对象束语引用类型，会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。

11、说一下v-model的原理？

v-model本质上是一个语法糖，可以看成value+input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

12、vue事件绑定原理是什么？

原生事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue自定义的$on实现的。

13、了解keep-alive吗？

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。常用的两个属性是include/exclude，允许组件有条件的进行缓存。两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。keep-alive中还运用了LUR(Least Recently Used)算法。

14、v-model是什么？怎么使用？Vue中标签怎么绑定事件？

v-model双向绑定；

&l