五莲网站建设维护推广国外免费ip地址
前端面试 Vue 必备内容详解
如果你正在准备 Vue 相关的前端面试，这份详细指南将帮助你掌握 Vue 核心知识，助你高效备战面试。
1. Vue 基础知识
1.1 Vue 的核心概念
- 声明式渲染：Vue 采用数据驱动视图的方式，通过
{{ }}语法或v-bind绑定数据，无需手动操作 DOM。 - 组件化开发：Vue 提供了单文件组件（SFC），支持 HTML、CSS、JS 组合在
.vue文件中，提高代码复用性和可维护性。 - 数据驱动：Vue 采用响应式数据系统，自动追踪组件依赖，并在数据变化时高效更新 DOM。
1.2 Vue 的生命周期
Vue 2.x 生命周期
| 钩子函数 | 触发时机 | 常见应用 |
|---|---|---|
beforeCreate | 实例创建前，data 和 methods 尚未初始化 | 初始化 data，不常用 |
created | 实例创建完成，data 和 methods 可用 | 发送 Ajax 请求，初始化数据 |
beforeMount | 模板编译完成，但未挂载到 DOM | 访问虚拟 DOM（VNode） |
mounted | 组件已挂载到 DOM | 操作真实 DOM，初始化第三方库 |
beforeUpdate | 数据变更，视图更新前 | 获取更新前的数据状态 |
updated | 数据变更，视图更新后 | 获取最新的 DOM 结构 |
beforeDestroy | 组件销毁前 | 清除定时器、解绑事件 |
destroyed | 组件销毁后 | 释放资源，清理内存 |
Vue 3.x 生命周期
Vue 3 采用 Composition API，可使用 onMounted、onUnmounted 等生命周期钩子：
<script setup>
import { onMounted, onUnmounted } from 'vue';onMounted(() => {console.log('组件已挂载');
});onUnmounted(() => {console.log('组件已销毁');
});
</script>
1.3 Vue 的数据双向绑定
原理（Vue2 和 Vue3）
- Vue2：使用
Object.defineProperty()进行数据劫持，拦截get和set。 - Vue3：使用
Proxy，更强大且支持数组、对象嵌套数据劫持。
示例
// Vue2 响应式数据实现
function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {get() {console.log(`获取 ${key