当前位置：首页 > news >正文

前端框架Vue内容回顾

news 来源：原创 2025/5/24 8:47:54

前端面试 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