Vue 2 和 Vue 3 面试题及讲解

Vue 2 面试题

1. 什么是Vue以及Vue的特点？

    

   Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 的特点包括但不限于：组件化开发，无需直接操作 DOM；使用虚拟 DOM 和 diff 算法复用 DOM 节点；提供简洁易用的模板语法

   1

   。

2. SPA及其优缺点是什么？

    

   单页面应用（Single Page Application, SPA）指的是在网页加载完成后不会因为用户的操作而进行整个页面的重新加载，而是利用路由机制实现 HTML 内容的变化、UI 和用户的交互。优点在于提高了用户体验，减轻了服务器的压力，并且实现了前后端分离。然而，初次加载耗时较长，浏览器前进后退功能不可直接使用，SEO 优化难度较大

   1

   。

3. v-if 和 v-show 的区别是什么？

    

   v-if 是真正的条件渲染，它会根据表达式的真假值来决定是否将元素添加到 DOM 中；而 v-show 则始终会渲染元素，只是通过 CSS 样式控制其可见性。因此，当条件频繁切换时，v-show 更高效，因为它避免了销毁和重建元素的过程

   1

   。

4. 如何动态绑定 class 和 style？

    

   在 Vue 中，可以通过对象或数组的形式动态绑定 class 和 style。对于 class，如果样式个数和名字不确定，则适合使用对象写法；若样式确定但是否应用不确定，则适用数组写法。例如：

   html
   深色版本
   <div :class="[isActive ? activeClass : '', errorClass]"></div>
   

5. computed 和 watch 的区别是什么？

    

   computed 属性的结果具有缓存属性，只有在其依赖的数据发生变化时才会重新计算。适用于需要基于其他数据派生出新数据的情况。watch 则主要用于监听某些数据的变化并执行相应的操作，尤其适用于异步任务或开销较大的逻辑

   1

   。

Vue 3 面试题

1. Vue 3 相较于 Vue 2 的主要改进有哪些？

    

   Vue 3 引入了许多新的特性和改进，如采用 Proxy API 实现更强大的响应式系统，支持 Fragments、Teleport 和 Suspense 组件，增强了 TypeScript 支持，提供了 Composition API 来更好地组织代码逻辑等。此外，还对编译器进行了优化，提升了渲染性能

   7

   。

2. Composition API 和 Options API 的区别是什么？

    

   Composition API 允许开发者以函数的方式组织逻辑，使得逻辑更加集中，便于理解和维护。相比之下，Options API 将逻辑分散在不同的生命周期钩子和选项中，虽然结构清晰但对于大型项目来说可能不够灵活。Composition API 提供了更好的类型推断支持，并且更适合与 TypeScript 结合使用

   7

   。

3. Vue 3 的响应式原理是什么？

    

   Vue 3 使用 ES6 的 Proxy 对象替代了 Vue 2 中的 Object.defineProperty 方法来实现响应式。Proxy 可以拦截对象的所有操作，不仅限于属性访问，还包括属性的添加和删除。这意味着即使是在对象创建之后添加的新属性也能被自动追踪，从而解决了 Vue 2 中存在的问题

   7

   。

4. ref 和 reactive 的作用是什么？

    

   ref 用来创建一个响应式的引用，通常用于包裹原始值（如数字、字符串）。它可以作为函数返回值，允许我们在模板中直接使用而不必每次都写 .value。reactive 接受一个普通对象并返回一个新的响应式代理对象，所有嵌套属性都会变成响应式的。选择哪一个取决于你要处理的数据类型

   7

   。

5. Vue 3 生命周期钩子有什么变化？

    

   Vue 3 的生命周期钩子与 Vue 2 类似，但有一些细微差别。例如，beforeCreate 和 created 钩子被 setup() 函数取代，后者在组件实例创建之前执行。其他钩子名称也有所调整，如 beforeDestroy 变为 beforeUnmount，destroyed 变为 unmounted。此外，Vue 3 还引入了一些新的生命周期钩子，如 onActivated 和 onDeactivated，专门用于处理 keep-alive 缓存组件的状态

   7

   。

6. Vue 3 中如何实现全局状态管理？

    

   Vue 3 中仍然可以使用 Vuex 进行全局状态管理，不过借助 Composition API 和新的 provide/inject API，状态管理变得更加灵活和模块化。例如，你可以创建一个 store 文件夹，在其中定义多个独立的状态片段，然后通过 provide 将它们暴露给子孙组件，再通过 inject 在需要的地方接收这些状态

   5

   。

以上是一些典型的 Vue 2 和 Vue 3 面试题及其解答，涵盖了框架的基础概念、特性对比、响应式系统的工作原理等方面的知识点。希望这些问题能够帮助你更好地准备面试，并加深对这两个版本的理解。请注意，随着 Vue 社区的发展和技术的进步，面试题也会不断更新，建议持续关注官方文档和其他权威资源获取最新信息

1

。