42道大厂面试真题，你背过几道？

一直在搜集大厂的面经，最近整理了一些Vue的面试题，总结了答案和详细的解析。

关注「灵题库」，更多面试真题 & 详解。

1. vue computed和watch的区别【网易,京东,拼多多】

知识点
computed和watch的区别
题目
讲一下vue组件的computed和watch的区别。
答案
应用场景不同
computed用在根据data属性或者其他computed计算得到一个新值的情况，computed的值一般被用在渲染中。
watch用在监听数据变化，然后做一些有副作用的操作的场景。

执行过程不同
在依赖的data属性变化后，computed并不会重新计算新的值，而是等到访问的时候再判断，如果依赖的data有改动则重新计算并返回结果，如果依赖的data没有改动，就不计算，直接返回当前结果。
依赖的数据变化后就会执行watch的回调。

2. v-if和v-show的区别【百度,网易,腾讯,字节,美团,快手,拼多多】

知识点
v-if VS v-show
题目
vue中的v-if指令和v-show指令区别是什么？
答案
行为不同：v-if指令在满足条件时候才会渲染DOM，v-show一开始就渲染DOM，满足条件时候才设置CSS的display属性让元素显示出来。
应用场景不同：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. vue常用指令【京东】

知识点
Vue指令
题目
vue常用指令有哪些？
答案
v-show // 控制元素是否展示
v-if、v-else-if、v-else // if表达式控制元素展示
v-for // 循环渲染
v-bind // 绑定数据
v-model // 双向绑定
v-on // 绑定事件

4. vue父子组件挂载顺序？【百度】

知识点
父子组件挂载顺序
题目
vue父子组件挂载顺序是什么？
答案
加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted -> 父 mounted
更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

5. v-model的作用【滴滴】

知识点
v-model
题目
v-model的作用是什么？
答案
这个指令用于给Vue组件实现双向绑定，状态的改变会同步到组件上，组件的值的变化也会同步到状态上。

6. v-for和v-if放在一起用好吗【网易】

知识点
避免 v-if 和 v-for 用在一起
题目
v-for和v-if放在一起用好吗
答案
v-if和v-for不要同时使用，因为会在每次渲染时候都要遍历列表并判断是否需要渲染，这个遍历操作其实是有一部分冗余或者完全不必要的。
应该用以下方式替换v-if和v-for同时使用的方案：

1. 如果是为了过滤一个列表中的项目（v-for循环，v-if过滤条件），可以将列表作为计算属性，在computed中过滤出需要渲染的列表，再进行渲染。这样避免了每次渲染都计算（只在computed依赖的属性变化时候才计算），同时渲染列表是过滤了的，那么循环的次数也可能减少。
2. 如果是为了控制整个列表的展示和隐藏（v-for循环，v-if判断整个列表是否需要展示），可以将判断条件放到父元素（ul、ol）上。这样展示和隐藏的判断只需要执行一次（在列表最开始）。

Vue3修改了v-if和v-for的优先级，v-if没有权限访问v-for的变量，这个需要注意。

7. vue组件样式污染【腾讯】

知识点
style标签中的scoped属性
题目
如何避免vue组件的样式污染？
答案
在style标签中添加“scoped”属性，可以避免当前组件的CSS污染全局。
添加了这个属性后，vue-loader会给组件的每个元素添加一个data属性，并且将CSS代码编译，添加这个data属性的选择器。

8. Vue如何给一个对象添加新的属性【腾讯,美团,快手】

知识点
深入响应式原理.检测变化的注意事项.对于对象
题目
Vue如何给一个对象添加新的属性？
答案
使用Vue.set(object, propertyName, value)或者vm.$set((object, propertyName, value)。这两个方法相同。

9. vue的keep-alive组件【字节,京东,拼多多】

知识点
keep-alive组件
题目
讲一下vue的keep-alive组件，什么时候会用到？
答案
keep-alive是一个内置组件，它所包裹的组件会在不同的渲染中缓存状态。用在需要让自定义组件在不同的渲染中保持状态不变的场景。例如一些表单组件，如果已经填写好一些内容，然后切到其他组件，再切换回表单时候，应该保持已经填写好的内容，这时候可以选择使用keep-alive。

10. process.nextTick和Vue.nextTick【字节】

知识点
nextTick
题目
process.nextTick和Vue.nextTick的区别？
答案
Vue.nextTick是将任务加入到宏任务队列或者微任务队列。
process.nextTick并未将任务加入到宏任务队列或者微任务队列，它是将任务加到下次事件循环之前。

11. vue组件watch中deep和immediate的作用【美团】

知识点
watch
题目
vue组件watch中deep和immediate的作用
答案
watch有两个选项：deep和immediate，deep决定是否深度监听，即是否监听多层对象数据，immediate决定是否立即执行，如果为true，会在绑定时候（初始时候）立即执行，如果为false，只在监听的值变更时候执行。默认为false。

12. slot【滴滴,京东,快手】

知识点