vue面试题---对比vue2和vue3

weixin_45351117

1147人浏览 · 2025-04-17 15:55:43

weixin_45351117 · 2025-04-17 15:55:43 发布

Vue2 vs Vue3 高频面试题及答案

1. 响应式系统原理对比

Q: Vue2的Object.defineProperty和Vue3的Proxy响应式实现有何本质区别？各有什么优缺点？

A:
Vue2实现:

Object.defineProperty(obj, key, {
  get() {
    track(key); // 依赖收集
    return val;
  },
  set(newVal) {
    val = newVal;
    trigger(key); // 触发更新
  }
});

缺点:

无法检测对象属性的添加/删除
数组变异方法需要特殊处理
初始化时递归遍历所有属性，性能较差

Vue3实现:

new Proxy(obj, {
  get(target, key) {
    track(target, key);
    return Reflect.get(target, key);
  },
  set(target, key, value) {
    Reflect.set(target, key, value);
    trigger(target, key);
  }
});

优势:

支持动态添加/删除属性
更好的数组支持
惰性监听，性能更好
支持Map/Set等新数据类型

2. Composition API设计理念

Q: 为什么Vue3要引入Composition API？与Options API相比有哪些优势？

A:
设计动机:

更好的逻辑复用能力
更灵活的组织代码
更好的TypeScript支持

对比示例:

// Options API
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } },
  mounted() { console.log(this.count) }
}

// Composition API
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    onMounted(() => console.log(count.value));
    return { count, increment };
  }
}

优势:

相关逻辑可以组织在一起
不受组件选项分割影响
更容易提取复用逻辑
更好的类型推导

3. 性能优化改进

Q: Vue3在哪些方面做了性能优化？具体如何实现的？

A:
主要优化点:

编译时优化:
- 静态节点提升(Static Hoisting)
- 补丁标志(Patch Flags)
- 树结构拍平(Tree Flattening)
运行时优化:
- 更快的虚拟DOM算法
- 基于Proxy的响应式系统
- 更小的包体积(约10KB gzip后)
SSR优化:
- 静态内容直接作为字符串返回
- 更高效的水合(Hydration)过程

4. 生命周期变化

Q: Vue3的生命周期有哪些变化？如何对应Vue2的生命周期？

A:
对应关系:

Vue2选项	Vue3组合式API	变化说明
beforeCreate	无直接对应	使用setup()替代
created	无直接对应	使用setup()替代
beforeMount	onBeforeMount	名称添加on前缀
mounted	onMounted	名称添加on前缀
beforeUpdate	onBeforeUpdate	名称添加on前缀
updated	onUpdated	名称添加on前缀
beforeDestroy	onBeforeUnmount	更名
destroyed	onUnmounted	更名
errorCaptured	onErrorCaptured	名称添加on前缀

新增钩子:

onRenderTracked (调试用)
onRenderTriggered (调试用)
onActivated (keep-alive)
onDeactivated (keep-alive)

5. 片段和Teleport

Q: Vue3新增的Fragment和Teleport特性有什么作用？如何使用？

A:
Fragment:

<!-- Vue2需要根元素 -->
<template>
  <div>
    <p>Item 1</p>
    <p>Item 2</p>
  </div>
</template>

<!-- Vue3支持多根节点 -->
<template>
  <p>Item 1</p>
  <p>Item 2</p>
</template>

Teleport:

<template>
  <button @click="showModal">显示弹窗</button>
  
  <Teleport to="body">
    <div v-if="isOpen" class="modal">
      模态框内容
    </div>
  </Teleport>
</template>

作用:

将内容渲染到DOM中的任何位置
解决z-index、overflow等问题
保持组件逻辑的父子关系

6. 自定义渲染器API

Q: Vue3的自定义渲染器API有什么作用？举一个实际应用场景

A:
核心能力:

import { createRenderer } from 'vue';

const { render, createApp } = createRenderer({
  patchProp, // 处理props
  insert,    // 插入元素
  remove,    // 移除元素
  createElement // 创建元素
});

// 创建自定义渲染器应用
const app = createApp(App);
app.mount('#custom-container');

应用场景:

小程序渲染(如uni-app)
Canvas/SVG渲染
Native渲染(如Weex)
终端命令行界面

7. 更好的TypeScript支持

Q: Vue3如何改进对TypeScript的支持？举几个类型推导的例子

A:
改进点:

代码库完全用TypeScript重写
Composition API提供更好的类型推断
组件选项类型定义更完善

类型推导示例:

import { defineComponent, ref } from 'vue';

// 组件类型推导
export default defineComponent({
  props: {
    message: { type: String, required: true }
  },
  setup(props) {
    // props自动推断为{ message: string }
    const count = ref(0); // 推断为Ref<number>
    
    return { count };
  }
});

// 组合函数类型
function useCounter(initialValue: number) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  return { count, increment };
}

8. 全局API变化

Q: Vue3的全局API有哪些重大变化？为什么要做这些改变？

A:
主要变化:

Vue2全局API	Vue3替代方案	变化原因
Vue.nextTick	import { nextTick }	更好的Tree-shaking支持
Vue.set	不再需要	Proxy自动检测变化
Vue.delete	不再需要	Proxy自动检测变化
Vue.filter	移除	推荐使用方法替代
Vue.directive	app.directive	应用实例作用域
Vue.mixin	app.mixin	应用实例作用域

设计目的:

支持Tree-shaking减少打包体积
避免全局污染
更清晰的API作用域
更好的TypeScript集成

9. 迁移策略

Q: 从Vue2迁移到Vue3有哪些主要注意事项？如何制定迁移计划？

A:
迁移步骤:

使用迁移构建版本(Vue2.7)
逐步启用兼容特性
使用迁移辅助工具
```
npm install @vue/compat
```
逐步重构组件

主要注意事项:

生命周期钩子重命名
v-model用法变化
事件API变化(.native移除)
过滤器(filter)移除
过渡类名变化

10. 生态系统兼容性

Q: Vue3对生态库的兼容情况如何？常用库如Vuex、Router有哪些变化？

A:
核心库状态:

库名	Vue3状态	主要变化
Vue Router	4.x版本	创建方式变化
Vuex	4.x版本	创建方式变化
Vuetify	支持	需要v3+版本
Element Plus	Vue3专属版本	完全重写
Nuxt.js	支持	需要v3+版本

创建方式变化:

// Vue Router 4.x
import { createRouter } from 'vue-router';
const router = createRouter({ /* options */ });

// Vuex 4.x
import { createStore } from 'vuex';
const store = createStore({ /* options */ });