###
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
};
}
};
```
本文深入解析Vue.js框架中的MVVM模式运作原理及其优势，重点介绍Vue如何利用Object.defineProperty实现数据的双向绑定，让开发者能更专注于业务逻辑而非DOM操作。
扫一扫
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
