面试篇：求职中必须掌握的Vue知识点

Posted 2021-05-07 WF帆少

这篇文章是作者在求职过程所总结的Vue相关面试题及其答案。今天先码这么多，后续面试题还会继续补上。

谈谈你对Vue响应式原理的理解

    利用数据劫持结合发布-订阅者模型的方式，利用Object.defineProperty对属性的setter和getter进行监听，当数据发生变化时会去通知订阅者，触发相对应的监听回调。每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

    这里可以展开继续问。Vue3响应式原理中使用了Proxy来代替Vue2的Object.defineProperty，那么使用Proxy有什么样的好处吗？可以参考2来回答。   

Object.defineProperty和Proxy的区别

    Object.defineProperty是针对对象的属性进行劫持，所以需要对每一个对象的每一个属性进行遍历。如果属性值是一个对象，还需要进行递归遍历。而Proxy它代理的是整个对象。

    Object.defineProperty没办法监听数组的下标，利用数组下标操作数据的时候无法实时响应。而Proxy不仅可以代理对象，还可以代理数组。

v-model的实现原理

    v-model本质上是一个语法糖。它是利用v-bind:value绑定一个响应式数据，并同时绑定input事件。当输入框输入数据时，将输入的数据赋值给v-bind:value绑定的响应式数据。

父子组件生命周期执行顺序

1.渲染过程

    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子mounted -> 父 mounted

2.更新过程

    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

3.销毁过程

    父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

computed和watch的区别

    computed支持缓存，只有依赖数据发生变化时，才会重新计算；而watch不支持缓存，当数据发生变化时，直接触发相应的操作

    computed不支持异步，当computed内有异步操作时无效，无法监听到数据变化；而watch支持异步。

v-if和v-show的区别

    v-show是通过控制display的css属性来显示或者隐藏元素。v-if是通过销毁或者重建dom来显示或者隐藏元素

    这里可以展开问v-if和v-show分别在什么场景下使用？如果频繁操作dom元素的隐藏或者显示，使用v-show性能最优。单次操作dom元素的隐藏或者显示使用v-if性能最优

后续

为什么v-if和v-for不能作用在同一个元素上。

v-for为什么要使用key。

为什么不使用index来作为v-for的key。

事件修饰符主要有哪些。

scope实现原理。

谈谈你对nextTick的理解。

谈谈你对diff算法的理解。

keep-alive的实现原理。

首屏加载优化。

Vue3编译做了哪些优化

......

感谢

感谢大家的关注，想了解更多内容的可以关注新运营的公众号，以后发布文章同时也会同步到公众号中。