vue 面试题

### Vue 面试题及答案 #### 1. Vue.js 的响应式原理是什么？ Vue.js 利用 **Object.defineProperty**（Vue 2.x）或 **Proxy**（Vue 3.x）来劫持数据对象的读写操作。当数据发生变化时，Vue 能够检测到这些变化，并通知相关的视图进行更新。这种机制使得数据和视图保持同步，而无需手动操作 DOM。 具体来说，Vue 会递归地将数据对象的所有属性转换为 getter 和 setter，从而实现对数据的监听。在 Vue 3.x 中，使用 Proxy 替代了 Object.defineProperty，提供了更强大的功能和更好的性能[^1]。 #### 2. Vue 组件之间的通信方式有哪些？ - **props / $emit**：父组件通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件。 - **v-model**：本质上是 props 和 $emit 的语法糖，用于双向绑定数据。 - **provide / inject**：祖先组件向后代组件提供数据，不需要逐级传递。 - **Event Bus**：通过一个全局的 Vue 实例作为事件总线，实现任意组件间的通信。 - **Vuex**：适用于复杂应用的状态管理工具，集中管理应用的状态。 #### 3. Vue 生命周期钩子函数有哪些？分别在什么时候触发？ Vue 组件的生命周期可以分为以下几个阶段： - **beforeCreate**：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 - **created**：实例已经创建完成，属性已绑定，但 DOM 还未生成。 - **beforeMount**：挂载开始之前被调用。 - **mounted**：DOM 已经渲染完毕，可以访问真实的 DOM 元素。 - **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 - **updated**：数据更新后调用，虚拟 DOM 重新渲染并应用补丁。 - **beforeUnmount**：实例销毁之前调用。 - **unmounted**：实例销毁后调用。 #### 4. Vue 3 相比 Vue 2 有哪些改进？ - **更快的运行速度**：Vue 3 使用 Proxy 来实现响应式系统，相比 Vue 2 的 Object.defineProperty 更加高效。 - **更小的体积**：Vue 3 通过模块化设计和 Tree-shaking 技术，显著减少了框架的体积。 - **更好的 TypeScript 支持**：Vue 3 原生支持 TypeScript，提供了更好的类型推导和开发体验。 - **Composition API**：引入了类似于 React Hook 的 Composition API，使代码组织更加灵活和可复用。 - **更好的可维护性和扩展性**：Vue 3 的架构更加模块化，便于长期维护和扩展。 #### 5. Vue 中的 computed 和 watch 有什么区别？ - **computed**：计算属性基于它们的依赖进行缓存，只有在其依赖的数据发生变化时才会重新计算。适合处理复杂的逻辑和模板中的表达式。 - **watch**：观察某个数据的变化，并执行相应的回调函数。适用于异步操作或需要执行开销较大的任务。 #### 6. Vue 中的 key 属性有什么作用？ `key` 属性主要用于标识列表中每个元素的唯一性。当 Vue 渲染列表时，它会尽可能高效地复用现有的元素，而不是重新创建新的元素。通过设置唯一的 `key`，可以帮助 Vue 更准确地判断哪些元素发生了变化，从而提高渲染效率。 #### 7. Vue 中的 v-if 和 v-show 有什么区别？ - **v-if**：根据条件决定是否渲染元素。如果条件为假，则元素不会出现在 DOM 中。 - **v-show**：通过 CSS 的 `display` 属性控制元素的显示与隐藏。无论条件如何，元素始终存在于 DOM 中。 #### 8. Vue 中的 nextTick 是什么？有什么用途？ `nextTick` 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束后执行回调函数。由于 Vue 的响应式系统是异步更新的，因此在某些情况下，直接访问或操作 DOM 可能无法获取最新的状态。通过 `nextTick`，可以确保在 DOM 更新完成后执行相关操作。 #### 9. Vue 中的 mixin 是什么？有什么优缺点？ - **mixin**：是一种分发 Vue 组件中可复用功能的方式。可以通过定义 mixin 对象，包含组件的选项（如 data、methods、生命周期钩子等），然后将其混入到多个组件中。 - **优点**：提高代码的复用性和可维护性。 - **缺点**：可能导致命名冲突和逻辑混乱，特别是在大型项目中使用过多的 mixin 时。 #### 10. Vue 中的插槽（slot）是什么？如何使用？ 插槽是 Vue 提供的一种内容分发机制，允许父组件向子组件传递 HTML 内容。通过 `<slot>` 标签，可以在子组件中预留一个位置，供父组件填充内容。 - **默认插槽**：父组件直接传递内容给子组件。 - **具名插槽**：通过 `name` 属性指定不同的插槽位置。 - **作用域插槽**：子组件可以向父组件传递数据，父组件可以根据这些数据自定义内容。 ```html <!-- 子组件 --> <template> <div> <slot name="header"></slot> <p>主要内容</p> <slot name="footer"></slot> </div> </template> <!-- 父组件 --> <template> <child-component> <template #header> <h1>头部内容</h1> </template> <template #footer> <p>底部内容</p> </template> </child-component> </template> ``` #### 11. Vue 中的 keep-alive 是什么？有什么用途？ `keep-alive` 是 Vue 提供的一个内置组件，用于缓存动态组件的状态。当组件被切换时，`keep-alive` 可以保留组件的状态，避免重复渲染和初始化。这对于提升用户体验和性能非常有帮助。 ```html <keep-alive> <component :is="currentComponent"></component> </keep-alive> ``` #### 12. Vue 中的 directive 是什么？如何自定义指令？ 指令是 Vue 提供的一种特殊的属性，用于直接操作 DOM。常见的内置指令包括 `v-model`、`v-show`、`v-if` 等。 要自定义指令，可以通过 `directives` 选项定义一个对象，包含 `bind`、`inserted`、`update`、`componentUpdated` 和 `unbind` 等钩子函数。 ```javascript // 自定义指令 directives: { focus: { inserted(el) { el.focus(); } } } ``` #### 13. Vue 中的 Vuex 是什么？有什么作用？ Vuex 是 Vue 官方提供的状态管理模式和库，用于管理应用中的共享状态。它采用集中式存储管理所有组件的状态，并提供了一套规则来保证状态的变化是可以预测的。 - **State**：存储应用的状态。 - **Getters**：从 state 中派生出一些状态。 - **Mutations**：修改 state 的唯一方式，必须是同步函数。 - **Actions**：提交 mutations，可以包含异步操作。 - **Modules**：将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。 #### 14. Vue 中的 router 是什么？如何实现路由导航？ Vue Router 是 Vue 官方的路由管理器，用于构建单页应用（SPA）。它提供了声明式的路由配置、嵌套路由、动态路由等功能。 要实现路由导航，可以通过 `<router-link>` 组件或编程式导航（`$router.push`、`$router.replace` 等）。 ```html <router-link to="/home">首页</router-link> ``` ```javascript this.$router.push('/about'); ``` #### 15. Vue 中的 Composition API 是什么？有什么优势？ Composition API 是 Vue 3 引入的新特性，类似于 React Hook，允许开发者在不使用类组件的情况下，更好地组织和复用逻辑代码。它提供了一系列函数（如 `ref`、`reactive`、`watch`、`computed` 等），帮助开发者更灵活地管理组件的状态和逻辑。 - **优势**： - 提高代码的可读性和可维护性。 - 更好的类型推导和支持 TypeScript。 - 更容易复用逻辑代码。 ```javascript import { ref, onMounted } from 'vue'; export default { setup() { const count = ref(0); function increment() { count.value++; } onMounted(() => { console.log('组件已挂载'); }); return { count, increment }; } }; ```