### Vue 3
前端开发面试题整理汇总
#### Vue 3 的核心特性
Vue 3 引入了静态标记的概念，通过静态标记可以将模板中的静态内容和动态内容区分开来。这样在更新过程中，Vue 3 只会关注动态部分的比较，而对于静态内容则跳过比较步骤，从而避免了不必要的性能开销[^1]。
```javascript
<template>
<div>
<!-- 静态内容 -->
<div>foo</div>
<div>bar</div>
<!-- 动态内容 -->
<div>{{ dynamic }}</div>
</div>
</template>
```
#### Vue 实例的生命周期钩子
Vue 实例的生命周期钩子包括以下几个阶段：
- **beforeCreate**：实例初始化之后，数据观测
(data observer
) 和 event/watcher 事件配置之前被
调用。
- **created**：实例完成数据观测、属性和方法的运算，watch/event 事件回
调。但是此时还未挂载 DOM 元素。
- **beforeMount**：在挂载开始之前被
调用，相关的 render 函数首次被
调用。
- **mounted**：实例挂载完成后被
调用，此时可以访问到真实的 DOM 元素。
- **beforeUpdate**：数据更新时
调用，发生在虚拟 DOM 打补丁之前。
- **updated**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会
调用该钩子。
- **beforeDestroy**：实例销毁之前
调用。在这一步，实例仍然完全可用。
- **destroyed**：Vue 实例销毁后
调用。
调用后，Vue 实例指示的所有东西
都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
#### Vue 3 的 Composition API 与 Options API
Vue 3 提出了 Composition API，这是对传统 Options API 的一种补充。Options API 在 Vue 2 中使用广泛，但其开发方式不够灵活，组件间代码复用困难，并且 `this` 的上下文容易引起混乱，尤其是在 TypeScript 环境下[^2]。
Composition API 提供了一种更灵活的方式组织逻辑代码，允许开发者将相关逻辑分组并提取为可复用的函数。以下是 Composition API 的基本结构：
```javascript
<script setup>
import { ref, reactive } from 'vue';
const count = ref
(0
);
const state = reactive
({
name: 'Vue',
}
);
function increment
() {
count.value++;
}
</script>
<template>
<div>
<p>{{ state.name }} - {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
```
#### 自定义指令
在 Vue 开发中，当内置的核心指令无法满足需求时，可以通过自定义指令来操作 DOM。自定义指令分为全局自定义指令和私有自定义指令（组件内定义指令）。主要目的是在 Vue 模板中直接操作 DOM[^3]。
以下是一个简单的全局自定义指令示例：
```javascript
// 全局自定义指令
app.directive
('focus', {
mounted
(el
) {
el.focus
();
},
}
);
```
#### Vue 3 的性能优化
Vue 3 在性能优化方面做了大量改进，例如通过静态标记减少不必要的 DOM 比较，同时引入了树摇优化（Tree Shaking），使得未使用的代码不会被打包到最终文件中。此外，Vue 3 还支持更高效的响应式系统，通过 Proxy 替代 Vue 2 中的 Object.defineProperty[^1]。
#### 相关问题
本文精选了一系列前端JavaScript面试题目及解答示例，涵盖字符串处理、兼容性问题、面向对象编程等核心技能，帮助开发者准备面试。
扫一扫
1496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
