2022大厂高频面试题之Vue篇

系列文章：
2022前端大厂面试题之JavaScript篇(1)
2022前端大厂面试题之JavaScript篇(2)
2022前端大厂面试题之JavaScript篇(3)
2022前端大厂高频面试题之HTTP篇
2022大厂高频面试题之操作系统篇
2022大厂高频面试题之计算机网络篇
2022大厂高频面试题之CSS篇
2022大厂高频面试题之Vue篇

📒博客首页：若年封尘
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限，如有不妥，不吝赐教！
❤️期待一起交流，共同进步！

Vue的优点及缺点

Vue最核心的两个特点，响应式和组件化。

• 响应式
  这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，通过虚拟DOM让我们可以用数据来操作DOM，而不必去操作真实的DOM，提升了性能。且让开发者有更多的时间去思考业务逻辑。
• 组件化
  把一个单页应用中的各个模块拆分到一个个组件当中，或者把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的好处就是，提高了开发效率，方便重复使用，使项目的可维护性更强。
• 虚拟DOM
• 轻量级的框架
• 运行速度快

缺点：

• 不利于seo。
• 导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）。
• 初次加载时耗时多。

react框架是mvvm框架还是mvc框架

不是一个完整的MVC框架，可以认为是MVC中的V（View）。
MVVM 最重要的一个特征就是数据双向绑定, 而 React 是单向数据流,。
Vue.js 主要关注 MVVM 模式的 ViewModel 层, 它通过双向数据绑定连接视图和模型, 它更像是 MVVM 但并未完全按照 MVVM 去实现, 只是借鉴了 MVVM 中的一些思想。

Vue 双向数据绑定原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

使用时机：
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
2、想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；也就是更改数据后当你想立即使用js操作新的视图的时候需要使用它。

computed和watch

computed(计算属性)：
对于任何复杂逻辑，你都应当使用计算属性。计算属性是计算data里面的值然后加以转化，相当于对data里面的值，重新赋予一个新值。

watch(监听器)：
监听data中的数据,如果发生了变化,就进行某操作(我影响了别人)。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch是用来监听data里面的数据，而computed是用data里面是数据创造新的数据来更加方便的作用于view层。

Vue的生命周期

八大阶段：

1、创建前（beforeCreate）

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3、载入前（beforeMount）

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4、载入后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5、更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7、销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

结合代码理解

---

以下9个问题详解可参考：1、2

v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？

显然v-for优先于v-if被解析。
如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能；要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环；如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

Vue组件可能存在多个实例，如果使用对象形式定义data,则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，都是独立的，指向不同的引用，相互之间不会干扰，有效规避多实例之间状态污染问题。

而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

Vue中key的作用和工作原理

key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果；另外，若不设置key还可能在列表更新时引发一些隐蔽的bug。

key的内部原理

Vue中的diff算法

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。

2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch。

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

谈一谈对Vue组件化的理解

思路：

组件化定义、优点、使用场景和注意事项等方面展开陈述，同时要强调vue中组件化的一些特点。

1.组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；
2.组件化开发能大幅提高应用开发效率、测试性、复用性等；
3.组件使用按分类有：页面组件、业务组件、通用组件；
4.vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；
5.vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；
6.合理的划分组件，有助于提升应用性能；
7.组件应该是高内聚、低耦合的；
8.遵循单向数据流的原则。

谈一谈对Vue设计原则的理解

思路：

渐进式JavaScript框架
易用、灵活和高效

渐进式JavaScript框架：

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

易用性

vue提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写js、html和css就能轻松编写vue应用。

灵活性

渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能；随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。

高效性

超快的虚拟 DOM 和 diff 算法使我们的应用拥有最佳的性能表现。

追求高效的过程还在继续，vue3中引入Proxy对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。

Vue3.0的新特性

1.更快
虚拟DOM重写；优化slots的生成；静态树提升；静态属性提升；基于Proxy的响应式系统。

2.更小
通过摇树优化核心库体积。

3.更容易维护
TypeScript + 模块化。

4.更加友好
跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、Android、iOS）一起使用。

5.更容易使用
改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告；更好的调试支持；独立的响应化模块；Composition API。