⚛️ 框架技术 - VUE

What is Vue.js? How does it differ from other frontend frameworks?

考察点：Vue框架定位。

答案：

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它采用自底向上的设计，可以逐步集成到现有项目中。Vue 的核心库专注于视图层，通过简洁的模板语法将数据渲染到DOM，同时提供响应式的数据绑定和组合的视图组件系统。

主要特点：

1. 渐进式框架：可以从局部功能开始，逐步应用到整个项目
2. 响应式系统：基于数据驱动的视图更新机制
3. 组件化开发：支持可复用的组件系统
4. 简单易学：模板语法简洁，学习曲线平缓

与其他框架对比：

• vs React：Vue 提供更简洁的模板语法，React 使用 JSX；Vue 有官方路由和状态管理方案
• vs Angular：Vue 更轻量级，Angular 是完整的应用框架；Vue 学习成本更低
• vs jQuery：Vue 是数据驱动，jQuery 是 DOM 操作驱动；Vue 提供现代化的组件开发体验

适用场景：

• 中小型单页应用开发
• 现有项目的渐进式改造
• 需要快速原型开发的项目
• 对学习成本敏感的团队

What are the main differences between Vue 2 and Vue 3?

考察点：版本核心差异。

答案：

Vue 3 相对于 Vue 2 进行了重大重构，在性能、开发体验和功能特性方面都有显著提升。最核心的变化是引入了 Composition API、使用 Proxy 重写响应式系统，以及采用新的编译优化策略。

核心差异对比：

1. 响应式系统：Vue 3 使用 Proxy 替代 Object.defineProperty，支持更完整的响应式
2. API 设计：新增 Composition API，提供更好的逻辑复用和 TypeScript 支持
3. 性能优化：编译时优化、Tree-shaking 支持、渲染性能提升
4. 新特性：Fragment、Teleport、Suspense 等新组件

重要变更：

• 多根节点：支持 Fragment，组件可以有多个根节点
• 生命周期：部分钩子重命名（如 beforeDestroy → beforeUnmount）
• v-model：支持多个 v-model，自定义修饰符
• 全局 API：createApp 替代 new Vue，链式调用配置

迁移考虑：

• Vue 2 项目可以通过迁移工具逐步升级
• Composition API 向下兼容，可在 Vue 2.7+ 中使用
• 大部分 Vue 2 代码在 Vue 3 中仍可正常运行

How does the Options API in Vue 2 work?

考察点：选项式API原理。

答案：

选项式API是Vue 2的核心编程模式，通过在组件对象中定义不同的选项（data、methods、computed等）来组织组件逻辑。Vue在实例化组件时会处理这些选项，建立响应式数据、绑定方法、设置计算属性等，形成完整的组件实例。

主要选项类型：

1. data：返回组件状态对象，会被转换为响应式数据
2. methods：定义组件方法，自动绑定this上下文
3. computed：计算属性，基于依赖进行缓存
4. watch：侦听器，监听数据变化执行副作用

工作流程：

// 选项式API示例
export default {
  data() {
    return { count: 0, message: 'Hello' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}

初始化过程：

• Vue 创建组件实例时依次处理各个选项
• data 选项通过 Object.defineProperty 转换为响应式
• computed 和 watch 建立依赖关系
• methods 绑定正确的 this 上下文

What is Vue 3’s Composition API? Why was it introduced?

考察点：组合式API概念。

答案：

Composition API是Vue 3引入的新的组件编程模式，通过setup函数来组织组件逻辑。它提供了一组函数式的API，允许开发者更灵活地组合和复用逻辑，特别是在处理复杂组件时具有显著优势。

核心特性：

1. 逻辑复用：通过自定义hooks轻松复用状态逻辑
2. 更好的TypeScript支持：完全的类型推断
3. 更清晰的代码组织：相关逻辑可以组织在一起
4. 更小的bundle size：支持tree-shaking

基本用法：

import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    const increment = () => {
      count.value++
    }
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}

引入原因：

• 大型组件维护困难：选项式API在复杂组件中逻辑分散
• 逻辑复用限制：mixins存在命名冲突和来源不清晰问题
• TypeScript支持不足：选项式API类型推断复杂
• 现代开发需求：更接近函数式编程范式

What is the difference between ref and reactive? In what scenarios are they used respectively?

考察点：响应式API选择。

答案：

ref和reactive是Vue 3中创建响应式数据的两个核心API。ref主要用于基本类型数据，通过.value访问；reactive用于对象类型数据，直接访问属性。两者底层都基于Proxy实现，但使用方式和适用场景不同。

核心区别：

1. 数据类型：ref适用于所有类型，reactive仅适用于对象类型
2. 访问方式：ref需要通过.value访问，reactive直接访问属性
3. 解包行为：ref在模板中自动解包，在setup中需要.value
4. 返回值：ref返回RefImpl对象，reactive返回Proxy对象

使用对比：

import { ref, reactive } from 'vue'

// ref 用法
const count = ref(0)
const message = ref('hello')
console.log(count.value) // 需要 .value

// reactive 用法  
const state = reactive({
  count: 0,
  message: 'hello'
})
console.log(state.count) // 直接访问

// 对象也可以用ref
const userRef = ref({ name: 'John', age: 20 })
console.log(userRef.value.name) // 需要 .value

使用场景：

• ref适用于：基本类型数据、需要整体替换的对象、与第三方库集成
• reactive适用于：本地状态对象、表单数据、配置对象、不需要整体替换的复杂对象

最佳实践：

• 基本类型优先使用ref
• 对象类型根据是否需要整体替换选择
• 避免解构reactive对象，会丢失响应性

What is the setup function in Vue 3? What is its position in the lifecycle?

考察点：setup函数机制。

答案：

setup函数是Composition API的入口点，在组件实例创建之前执行。它是组件初始化过程中最早执行的钩子，在所有选项式API（如data、computed、methods）之前运行，用于设置响应式数据、计算属性、方法等组件逻辑。

执行时机：
setup函数在组件生命周期中的位置是在beforeCreate和created钩子之间，更确切地说是在beforeCreate之前执行。此时组件实例已创建但还未初始化选项式API。

函数签名：

setup(props, context) {
  // props: 响应式的props对象
  // context: { attrs, slots, emit, expose }
  
  const count = ref(0)
  const increment = () => count.value++
  
  // 返回模板可用的数据和方法
  return {
    count,
    increment
  }
}

生命周期对比：

组件创建 → setup() → beforeCreate → created → beforeMount → mounted

关键特点：

1. 无this访问：setup执行时this为undefined
2. props响应式：接收的props是响应式的，但不能解构
3. context对象：提供attrs、slots、emit、expose等工具
4. 返回值约定：返回对象的属性可在模板中使用

注意事项：

• 不能访问this，需要通过参数获取组件实例相关信息
• 返回的refs在模板中会自动解包
• 异步setup需要配合Suspense使用

What changes are there in Vue 3’s lifecycle hooks?

考察点：生命周期更新。

答案：

Vue 3在保持大部分生命周期钩子不变的基础上，进行了一些重命名和调整，并为Composition API提供了对应的生命周期函数。主要变化体现在钩子名称的统一性和Composition API的集成。

选项式API变化对比：

// Vue 2 → Vue 3
beforeDestroy → beforeUnmount  
destroyed → unmounted

// 其他保持不变
beforeCreate、created、beforeMount、mounted
beforeUpdate、updated、errorCaptured

Composition API生命周期：

import { 
  onBeforeMount, onMounted, 
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onErrorCaptured 
} from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    onBeforeUnmount(() => {
      console.log('组件即将卸载')
    })
  }
}

新增的调试钩子：

• onRenderTracked：跟踪响应式依赖何时被收集
• onRenderTriggered：跟踪响应式依赖何时触发重新渲染

使用说明：

• Composition API中没有beforeCreate和created对应函数（setup就是它们的替代）
• 可以在同一个组件中多次调用同一个生命周期钩子
• 生命周期钩子只能在setup期间注册

迁移建议：

• 将beforeDestroy改为beforeUnmount
• 将destroyed改为unmounted
• 在Composition API中使用对应的on前缀函数

What is Single File Component (SFC)? What are its advantages?

考察点：SFC组件模式。

答案：

单文件组件（Single File Component, SFC）是Vue特有的文件格式，以.vue为扩展名，将组件的模板、逻辑和样式封装在同一个文件中。通过<template>、<script>、<style>三个标签分别定义组件的不同部分，提供了更好的开发体验和代码组织方式。

基本结构：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  color: red;
}
</style>

核心优势：

1. 关注点集中：相关的模板、逻辑、样式在同一文件中
2. 作用域样式：通过scoped属性实现样式隔离
3. 语法高亮：编辑器提供完整的语法支持
4. 热重载：开发时支持热更新，提升开发效率

高级特性：

• CSS Modules：支持模块化CSS
• 预处理器：支持TypeScript、Sass、Less等
• 自定义块：可以定义自定义的标签块
• 作用域插槽：模板中可以使用作用域插槽语法

构建工具支持：

• 需要webpack的vue-loader或Vite进行编译
• 可以与各种预处理器和工具链集成
• 支持代码分割和懒加载

How to implement inter-component communication in Vue 3?

考察点：组件通信方案。

答案：

Vue 3提供了多种组件间通信方式，包括继承自Vue 2的经典方法和新增的通信机制。根据组件关系的不同（父子、兄弟、跨级），可以选择最适合的通信方式来实现数据传递和事件处理。

常用通信方式：

1. Props + Emits（父子通信）

// 父组件
<ChildComponent :message="msg" @update="handleUpdate" />

// 子组件
const emit = defineEmits(['update'])
const props = defineProps(['message'])
emit('update', newValue)

2. provide/inject（跨级通信）

// 祖先组件提供数据
provide('userInfo', userData)

// 后代组件注入数据  
const userInfo = inject('userInfo')

3. ref模板引用

const childRef = ref(null)
childRef.value.childMethod()

新增通信机制：

• defineExpose：子组件主动暴露方法和属性
• 多个v-model：支持多个双向绑定
• 自定义v-model修饰符：扩展双向绑定功能

全局状态管理：

• Pinia：官方推荐的状态管理库
• Vuex 4：兼容Vue 3的传统状态管理
• 全局属性：app.config.globalProperties

选择建议：

• 父子组件优先使用props/emits
• 跨级组件使用provide/inject
• 复杂状态使用Pinia进行全局管理
• 简单全局数据可以使用reactive + provide

What is the difference between v-if and v-show?

考察点：条件渲染机制。

答案：

v-if和v-show都用于条件渲染，但实现机制和使用场景完全不同。v-if是真正的条件渲染，会根据条件动态创建和销毁DOM元素；v-show只是切换元素的CSS显示状态，DOM元素始终存在。

核心区别：

1. 渲染机制

   • v-if：条件为false时，元素不会渲染到DOM中
   • v-show：元素始终渲染，通过display:none控制显示

2. 性能特点

   • v-if：切换成本高，初始渲染成本低
   • v-show：切换成本低，初始渲染成本高

3. 生命周期影响

   • v-if：会触发组件的创建和销毁生命周期
   • v-show：不影响组件生命周期

使用示例：

<template>
  <!-- v-if: DOM中不存在元素 -->
  <div v-if="isVisible">条件渲染内容</div>
  
  <!-- v-show: DOM中存在但display:none -->
  <div v-show="isVisible">显示隐藏内容</div>
</template>

选择场景：

• v-if适用于：条件很少改变、初始条件为false、包含大量子组件
• v-show适用于：频繁切换显示隐藏、简单元素切换、性能敏感场景

注意事项：

• v-show不支持<template>元素
• v-show不支持v-else
• v-if支持v-else-if和v-else链式调用

What are the new changes in v-model in Vue 3?

考察点：双向绑定升级。

答案：

Vue 3对v-model进行了重大改进，支持多个v-model绑定、自定义参数名和修饰符。这些变化使得组件的双向绑定更加灵活和强大，特别是在构建复杂表单组件时提供了更好的开发体验。

主要变化：

1. 默认属性名变更

// Vue 2: 默认prop为value，事件为input
// Vue 3: 默认prop为modelValue，事件为update:modelValue

// Vue 3 组件实现
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

2. 多个v-model支持

<!-- 父组件 -->
<UserName 
  v-model:first-name="user.firstName"
  v-model:last-name="user.lastName" 
/>

<!-- 子组件 -->
<script setup>
const props = defineProps(['firstName', 'lastName'])
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script>

3. 自定义修饰符

<!-- 使用自定义修饰符 -->
<MyInput v-model.capitalize="text" />

<!-- 组件内处理修饰符 -->
<script setup>
const props = defineProps(['modelValue', 'modelModifiers'])
// modelModifiers.capitalize 为 true
</script>

破坏性变更：

• 移除了.sync修饰符，统一使用v-model
• 自定义组件的v-model默认prop从value改为modelValue
• 可以在同一组件上使用多个v-model

迁移建议：

• 将组件的value prop重命名为modelValue
• 将input事件重命名为update:modelValue
• 使用多个v-model替代.sync语法

What are computed properties? How do they differ from methods?

考察点：计算属性特性。

答案：

计算属性（computed）是基于响应式依赖进行缓存的属性，只有当其依赖的响应式数据发生变化时才会重新计算。它主要用于处理复杂的逻辑计算，避免在模板中进行复杂的表达式运算，提供更好的性能和可维护性。

核心特性：

1. 响应式缓存：只有依赖变化时才重新计算
2. 声明式：描述数据之间的关系而非计算过程
3. 自动依赖跟踪：Vue会自动追踪依赖的响应式数据
4. 惰性求值：只在被访问时才计算

使用对比：

// 计算属性
const count = ref(1)
const doubleCount = computed(() => {
  console.log('计算执行') // 只有count变化时才执行
  return count.value * 2
})

// 方法
const getDoubleCount = () => {
  console.log('方法执行') // 每次调用都执行
  return count.value * 2
}

主要区别：

• 缓存机制：computed有缓存，methods每次调用都执行
• 使用方式：computed作为属性访问，methods作为函数调用
• 依赖追踪：computed自动追踪依赖，methods需要手动管理
• 性能：computed在依赖不变时性能更好

适用场景：

• computed适用于：复杂数据转换、过滤排序、格式化显示、衍生状态
• methods适用于：事件处理、用户交互、执行副作用、一次性计算

最佳实践：

• 需要基于其他数据计算派生值时使用computed
• 需要执行异步操作或副作用时使用methods
• 模板中的复杂表达式建议提取为computed

What is the difference between watchEffect and watch in Vue 3?

考察点：侦听器API对比。

答案：

watchEffect和watch都是Vue 3中的侦听器API，用于监听响应式数据的变化并执行副作用。watch是显式指定监听目标的传统侦听器，而watchEffect是自动追踪依赖的新API，在使用方式和场景上有明显区别。

核心区别：

1. 依赖声明方式

// watch: 显式声明监听目标
watch(count, (newVal, oldVal) => {
  console.log('count changed', newVal, oldVal)
})

// watchEffect: 自动追踪依赖
watchEffect(() => {
  console.log('count is', count.value) // 自动监听count
})

2. 回调函数参数

   • watch：提供新值、旧值参数
   • watchEffect：无参数，直接在函数体中使用响应式数据

3. 执行时机

   • watch：默认懒执行，只在依赖变化时触发
   • watchEffect：立即执行一次，然后在依赖变化时重新执行

使用场景对比：

// watch 适用于需要新旧值对比的场景
watch(user, (newUser, oldUser) => {
  if (newUser.id !== oldUser.id) {
    fetchUserProfile(newUser.id)
  }
}, { deep: true })

// watchEffect 适用于副作用逻辑简单的场景  
watchEffect(() => {
  document.title = `${user.name} - ${route.meta.title}`
})

选择建议：

• 使用watch：需要访问新旧值、条件性执行、精确控制监听目标
• 使用watchEffect：简单的副作用、自动依赖追踪、立即执行需求

共同特性：

• 都返回停止函数用于取消监听
• 都支持清理副作用（onInvalidate）
• 都可以配置flush时机（pre、post、sync）

What is Vite? What advantages does it have over Webpack?

考察点：构建工具对比。

答案：

Vite是Vue团队开发的新一代前端构建工具，利用ES模块的原生支持和现代浏览器的能力，提供极速的开发服务器启动和热更新体验。它在开发环境使用原生ESM，生产环境使用Rollup进行打包，显著提升了开发效率。

核心特性：

1. 极速启动：开发服务器冷启动时间几乎为零
2. 即时热更新：模块级别的精确热更新
3. 原生ESM：直接利用浏览器的ES模块支持
4. 按需编译：只编译当前访问的模块

与Webpack对比优势：

1. 启动速度

   • Vite：利用ESM避免打包，启动时间毫秒级
   • Webpack：需要分析依赖图并打包所有模块

2. 热更新速度

   • Vite：基于ESM的精确更新，更新速度不受项目大小影响
   • Webpack：需要重新打包相关模块，大项目更新较慢

3. 开发体验

// Vite配置简洁
export default {
  plugins: [vue()],
  server: {
    port: 3000
  }
}

技术原理：

• 开发环境：HTTP服务器 + ESM + esbuild预构建
• 生产环境：Rollup打包 + 代码分割 + 压缩优化
• 依赖预构建：使用esbuild将CommonJS转换为ESM

适用场景：

• Vue/React等现代框架项目
• 需要快速原型开发
• 大型项目的开发环境优化
• 对构建速度有高要求的项目

What is Fragment in Vue 3? What problems does it solve?

考察点：多根节点特性。

答案：

Fragment是Vue 3引入的新特性，允许组件模板拥有多个根节点，而无需包装在单一容器元素中。Vue 3会自动创建一个虚拟的Fragment节点来包含这些根节点，在实际DOM中不会产生额外的包装元素。

Vue 2 vs Vue 3对比：

<!-- Vue 2: 必须有单一根节点 -->
<template>
  <div> <!-- 必需的包装div -->
    <header>头部</header>
    <main>内容</main>
    <footer>底部</footer>
  </div>
</template>

<!-- Vue 3: 支持多个根节点 -->
<template>
  <header>头部</header>
  <main>内容</main>
  <footer>底部</footer>
</template>

解决的问题：

1. DOM结构清洁：避免不必要的包装元素
2. CSS布局友好：不影响Flexbox、Grid等布局
3. 语义化更好：HTML结构更符合语义要求
4. 性能提升：减少DOM节点数量

注意事项：

<template>
  <!-- 多根节点时，属性继承需要显式指定 -->
  <div v-bind="$attrs">主内容</div>
  <div>次要内容</div>
</template>

<script>
export default {
  inheritAttrs: false // 禁用自动属性继承
}
</script>

使用场景：

• 列表渲染的多个并列元素
• 条件渲染的不同布局结构
• 组件库中避免额外包装层
• 与CSS Grid、Flexbox的配合使用

实现原理：
Vue 3编译器会将多根节点包装在Fragment虚拟节点中，运行时直接将子节点挂载到父容器，避免创建额外DOM元素。

How to integrate TypeScript in Vue 3 projects?

考察点：TS集成方案。

答案：

Vue 3对TypeScript提供了原生支持，可以通过多种方式集成TypeScript，包括项目创建时选择TypeScript模板、手动配置现有项目，或使用Vite等构建工具的TypeScript支持。Vue 3的Composition API天然对TypeScript友好。

项目初始化方式：

# 使用Vue CLI创建TS项目
vue create my-project --preset typescript

# 使用Vite创建TS项目  
npm create vue@latest my-project
# 选择TypeScript支持

# 使用Vite模板
npm create vite@latest my-project -- --template vue-ts

配置文件setup：

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext", 
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*", "*.d.ts"],
  "exclude": ["node_modules"]
}

组件TypeScript用法：

<script setup lang="ts">
// 接口定义
interface User {
  id: number
  name: string
  email?: string
}

// Props类型定义
interface Props {
  user: User
  count?: number
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})

// Emits类型定义
const emit = defineEmits<{
  update: [user: User]
  delete: [id: number]
}>()

// 响应式数据类型推断
const users = ref<User[]>([])
const currentUser = reactive<User>({
  id: 1,
  name: 'John'
})
</script>

高级类型支持：

• 组件实例类型：ComponentPublicInstance
• 全局属性类型：扩展GlobalProperties接口
• 路由类型：RouteLocationNormalized
• 状态管理类型：Pinia的完整类型推断

配置要点：

• 确保Vue文件的TypeScript支持（Volar插件）
• 配置路径别名的类型解析
• 设置严格模式获得更好的类型检查
• 使用Vue 3的defineComponent获得更好的类型推断

What is Vue Router 4? What are the main differences from Vue Router 3?

考察点：路由器升级。

答案：

Vue Router 4是专为Vue 3设计的官方路由管理器，在保持核心功能不变的基础上，进行了重要的API改进和新特性添加。主要变化包括创建方式的改变、更好的TypeScript支持，以及一些破坏性更新。

创建方式变化：

// Vue Router 3
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({ routes })

// Vue Router 4  
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes
})

主要区别对比：

1. 历史模式API

// Vue Router 4 的新历史模式API
createWebHistory()     // HTML5模式
createWebHashHistory() // Hash模式  
createMemoryHistory()  // 内存模式（SSR）

2. 导航守卫改进

// 新的导航守卫返回值
router.beforeEach((to, from) => {
  // 返回false取消导航
  if (!isAuthenticated) return false
  // 返回路由地址重定向
  if (to.name === 'login') return { name: 'home' }
})

新增特性：

• 动态路由更安全：改进的addRoute/removeRoute API
• 更好的TypeScript支持：完整的类型推断
• 组合式API集成：useRouter、useRoute等钩子
• 更小的包体积：支持tree-shaking

破坏性变更：

• mode选项被history选项替代
• 删除了通配符路由（*），使用正则表达式替代
• router.app属性被移除
• 一些导航守卫的行为调整

迁移要点：

• 更新路由创建语法
• 替换history模式配置
• 调整通配符路由写法
• 更新TypeScript类型声明

What advantages does Pinia have over Vuex?

考察点：状态管理选择。

答案：

Pinia是Vue团队推荐的新一代状态管理库，专为Vue 3设计，提供了更简洁的API、更好的TypeScript支持和开发体验。它解决了Vuex在复杂项目中的一些痛点，被视为Vuex的精神继承者。

核心优势对比：

1. API简洁性

// Vuex (复杂的模块结构)
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    INCREMENT(state) { state.count++ }
  },
  actions: {
    increment({ commit }) { commit('INCREMENT') }
  }
})

// Pinia (更直观的语法)
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
})

2. TypeScript支持

// Pinia 提供完整的类型推断
const store = useCounterStore()
store.count // 自动类型推断
store.increment() // 方法类型检查

主要优势：

• 无mutations：直接修改state，减少样板代码
• 模块化自然：每个store都是独立的，无需嵌套
• DevTools支持：时间旅行、热更新等调试功能
• 插件系统：更灵活的扩展机制
• 服务端渲染友好：更好的SSR支持

使用对比：

// Pinia Composition API风格
export const useUserStore = defineStore('user', () => {
  const users = ref([])
  const currentUser = computed(() => users.value[0])
  
  function addUser(user) {
    users.value.push(user)
  }
  
  return { users, currentUser, addUser }
})

迁移建议：

• 新项目优先选择Pinia
• Vuex项目可以逐步迁移到Pinia
• Pinia体积更小，性能更好
• 学习成本更低，更符合Vue 3的设计理念

How to implement logic reuse in Composition API? What are the design principles for custom hooks?

考察点：逻辑复用模式。

答案：

Composition API通过自定义hook（组合函数）实现逻辑复用，将相关的响应式状态和逻辑封装成可复用的函数。这种模式比Vue 2的mixins更清晰，避免了命名冲突和来源不明的问题，提供了更好的代码组织和复用方式。

基本实现模式：

// 自定义hook示例：useCounter
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const doubleCount = computed(() => count.value * 2)
  
  const increment = () => {
    count.value++
  }
  
  const decrement = () => {
    count.value--
  }
  
  const reset = () => {
    count.value = initialValue
  }
  
  return {
    count: readonly(count),
    doubleCount,
    increment,
    decrement,
    reset
  }
}

设计原则：

1. 单一职责：每个hook专注解决一个特定问题
2. 命名规范：使用use前缀，语义化命名
3. 返回值一致：返回对象包含状态和方法
4. 参数灵活：支持配置参数和默认值
5. 状态封装：适当使用readonly保护内部状态

高级应用示例：

// 复杂hook：useAsyncData
export function useAsyncData(fetcher, options = {}) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)
  
  const execute = async (...args) => {
    try {
      loading.value = true
      error.value = null
      data.value = await fetcher(...args)
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }
  
  // 自动执行
  if (options.immediate) {
    execute()
  }
  
  return {
    data: readonly(data),
    error: readonly(error),
    loading: readonly(loading),
    execute
  }
}

最佳实践：

• 合理抽象，避免过度工程化
• 提供清晰的API和文档
• 考虑副作用清理（onUnmounted）
• 支持响应式参数和配置

How does Vue 3’s reactive system work? What advantages does Proxy have over Object.defineProperty?

考察点：响应式原理。

答案：

Vue 3的响应式系统基于ES6 Proxy重新设计，通过拦截对象的读取和修改操作来实现依赖追踪和响应式更新。系统核心包括依赖收集（track）、触发更新（trigger）和副作用函数（effect）三个部分，形成完整的响应式数据流。

工作原理：

1. Proxy拦截：创建响应式对象时用Proxy包装原始对象
2. 依赖收集：读取属性时记录当前active effect
3. 触发更新：修改属性时找到相关effects并执行
4. 批量更新：使用任务队列合并多次更新

核心实现机制：

// 简化的响应式实现原理
const targetMap = new WeakMap()
let activeEffect = null

function track(target, key) {
  if (!activeEffect) return
  
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }
  
  deps.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const effects = depsMap.get(key)
  if (effects) {
    effects.forEach(effect => effect())
  }
}

Proxy vs Object.defineProperty优势：

1. 更全面的拦截能力

// Proxy可以拦截更多操作
new Proxy(target, {
  get(target, key) { /* 属性读取 */ },
  set(target, key, value) { /* 属性设置 */ },
  deleteProperty(target, key) { /* 属性删除 */ },
  has(target, key) { /* in操作符 */ },
  ownKeys(target) { /* Object.keys() */ }
})

2. 动态属性支持：无需预先定义即可响应新增属性
3. 数组优化：直接拦截数组索引和length，无需特殊处理
4. 性能提升：避免递归遍历所有属性，按需代理
5. 嵌套对象：深度响应式无需预处理

局限性和解决方案：

• 浏览器兼容性：Proxy无法polyfill，Vue 3不支持IE11
• Ref包装：基本类型需要通过ref包装才能响应式
• 解构丢失：reactive对象解构会丢失响应性，需使用toRefs

How to correctly use lifecycle hooks in Composition API?

考察点：生命周期应用。

答案：

在Composition API中，生命周期钩子以函数形式提供，必须在setup函数内部调用。这些钩子函数提供了组件生命周期各个阶段的访问入口，允许在适当时机执行副作用、清理资源或初始化数据。

生命周期钩子映射：

import {
  onBeforeMount,    // beforeMount
  onMounted,        // mounted  
  onBeforeUpdate,   // beforeUpdate
  onUpdated,        // updated
  onBeforeUnmount,  // beforeUnmount (原beforeDestroy)
  onUnmounted,      // unmounted (原destroyed)
  onErrorCaptured,  // errorCaptured
  onActivated,      // activated (keep-alive)
  onDeactivated     // deactivated (keep-alive)
} from 'vue'

正确使用方式：

export default {
  setup() {
    // 组件挂载后执行
    onMounted(() => {
      console.log('组件已挂载到DOM')
      // DOM操作、事件监听、数据初始化
    })
    
    // 组件卸载前清理
    onBeforeUnmount(() => {
      console.log('组件即将卸载')
      // 清理定时器、解绑事件、取消请求
    })
    
    // 可以注册多个相同钩子
    onMounted(() => {
      console.log('另一个mounted钩子')
    })
  }
}

实际应用场景：

export default {
  setup() {
    const data = ref([])
    let timer = null
    
    // 数据获取
    onMounted(async () => {
      data.value = await fetchData()
    })
    
    // 定时器管理
    onMounted(() => {
      timer = setInterval(() => {
        // 定时任务
      }, 1000)
    })
    
    // 资源清理
    onBeforeUnmount(() => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    })
    
    return { data }
  }
}

注意事项和最佳实践：

• 调用位置：只能在setup函数内部调用
• 多次调用：同一钩子可以多次注册，按注册顺序执行
• 错误处理：使用onErrorCaptured捕获子组件错误
• 条件注册：可以根据条件动态注册钩子
• 资源清理：必须在onBeforeUnmount中清理副作用

与Options API对比：

• 更灵活的钩子组合和复用
• 可以在自定义hook中使用
• 更好的TypeScript类型支持
• 逻辑可以就近组织，提高可读性

How to implement component lazy loading and code splitting in Vue 3?

考察点：性能优化技术。

答案：

Vue 3支持多种懒加载和代码分割方式，通过动态导入、异步组件和路由懒加载来优化应用性能。这些技术可以减少初始bundle大小，实现按需加载，提升首屏加载速度和用户体验。

组件懒加载实现：

// 1. 动态导入组件
const AsyncComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)

// 2. 带加载状态的异步组件
const AsyncComponentWithOptions = defineAsyncComponent({
  loader: () => import('./components/HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

// 3. 条件加载
const ConditionalComponent = defineAsyncComponent(() => {
  if (condition) {
    return import('./ComponentA.vue')
  }
  return import('./ComponentB.vue')
})

路由级别代码分割：

const router = createRouter({
  routes: [
    {
      path: '/home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about', 
      component: () => import('./views/About.vue')
    }
  ]
})

高级代码分割策略：

// 按功能模块分割
const AdminPanel = () => import(
  /* webpackChunkName: "admin" */ './views/AdminPanel.vue'
)

// 预加载关键路由
const Dashboard = () => import(
  /* webpackPreload: true */ './views/Dashboard.vue'  
)

// 懒加载配合Suspense
<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

性能优化技巧：

• 路由预获取：使用router.prefetch预加载可能访问的路由
• 组件缓存：结合keep-alive缓存已加载的组件
• 资源优先级：关键路径优先加载，非关键资源延后
• Bundle分析：使用工具分析包大小，优化分割策略

What is Teleport? In what scenarios is it used?

考察点：传送组件应用。

答案：

Teleport是Vue 3新增的内置组件，允许将子组件的DOM结构渲染到组件层次结构外的指定位置。它解决了模态框、提示框等组件在CSS层叠上下文和事件冒泡方面的问题，特别适用于需要突破父组件容器限制的UI元素。

基本用法：

<template>
  <div class="container">
    <h1>应用内容</h1>
    <!-- Teleport到body下 -->
    <Teleport to="body">
      <div class="modal" v-if="showModal">
        <p>这是一个模态框</p>
        <button @click="showModal = false">关闭</button>
      </div>
    </Teleport>
  </div>
</template>

常见使用场景：

• 模态框/弹窗：避免z-index层级问题
• Toast通知：全局消息提示
• 下拉菜单：避免父容器overflow:hidden影响
• 工具提示：Tooltip定位需求
• 全屏组件：视频播放器、图片预览等

高级特性：

<!-- 条件性传送 -->
<Teleport :to="target" :disabled="isMobile">
  <div class="desktop-sidebar">桌面侧边栏</div>
</Teleport>

<!-- 多个Teleport到同一目标 -->
<Teleport to="#modals">
  <div class="modal-1">模态框1</div>
</Teleport>
<Teleport to="#modals">  
  <div class="modal-2">模态框2</div>
</Teleport>

注意事项：

• 目标元素必须在DOM中存在
• 传送的组件仍保持Vue组件的逻辑关系
• 事件仍然沿着组件树冒泡，而非DOM树
• SSR需要特殊处理，避免水合不匹配

What is the purpose of Suspense component? How to handle loading states of async components?

考察点：异步处理机制。

答案：

Suspense是Vue 3提供的内置组件，用于处理异步组件的加载状态。它可以显示加载占位符，直到所有异步子组件完成加载，提供了统一的异步状态管理和更好的用户体验。

基本用法：

<template>
  <Suspense>
    <!-- 异步组件 -->
    <AsyncComponent />
    
    <!-- 加载状态 -->
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

异步组件定义：

// 异步setup函数
export default {
  async setup() {
    const data = await fetchUserData() // 异步操作
    return { data }
  }
}

// 或使用顶层await (script setup)
<script setup>
const data = await fetchUserData()
</script>

错误处理：

<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

<script setup>
import { onErrorCaptured } from 'vue'

onErrorCaptured((error) => {
  console.error('异步组件加载失败:', error)
  return false // 阻止错误继续传播
})
</script>

嵌套Suspense：

<!-- 外层Suspense处理路由级加载 -->
<Suspense>
  <router-view />
  <template #fallback>
    <PageLoading />
  </template>
</Suspense>

<!-- 内层Suspense处理组件级加载 -->
<Suspense>
  <UserProfile />
  <template #fallback>
    <ProfileSkeleton />
  </template>  
</Suspense>

How is TypeScript type inference implemented in Vue 3? How to define component types?

考察点：TS类型系统。

答案：

Vue 3通过重新设计的类型系统实现了完整的TypeScript支持，Composition API天然对TS友好。通过泛型、类型推断和编译时宏，为组件提供了强类型支持，包括props、emits、slots等的类型检查。

组件类型定义：

<script setup lang="ts">
// Props类型定义
interface Props {
  title: string
  count?: number
  users: User[]
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})

// Emits类型定义  
interface Emits {
  update: [value: number]
  delete: [id: string]
}

const emit = defineEmits<Emits>()

// 或者使用函数签名
const emit = defineEmits<{
  (e: 'update', value: number): void
  (e: 'delete', id: string): void
}>()
</script>

响应式数据类型：

interface User {
  id: number
  name: string
  email?: string
}

// 自动类型推断
const count = ref(0) // Ref<number>
const message = ref('hello') // Ref<string>

// 显式类型声明
const users = ref<User[]>([])
const user = reactive<User>({
  id: 1,
  name: 'John'
})

// 计算属性类型推断
const doubleCount = computed(() => count.value * 2) // ComputedRef<number>

组件实例类型：

<script setup lang="ts">
import type { ComponentPublicInstance } from 'vue'
import ChildComponent from './Child.vue'

const child = ref<ComponentPublicInstance<typeof ChildComponent>>()

// 访问子组件方法（需要defineExpose）
child.value?.childMethod()
</script>

How to implement permission-based route control in Vue 3 projects?

考察点：项目权限设计。

答案：

Vue 3项目中的权限路由控制通常结合Vue Router的导航守卫、动态路由和权限验证来实现。核心思路是在路由跳转前检查用户权限，根据权限动态添加或过滤路由，确保用户只能访问有权限的页面。

基本权限控制架构：

// 路由配置
const routes = [
  {
    path: '/login',
    component: Login,
    meta: { requiresAuth: false }
  },
  {
    path: '/admin',
    component: AdminPanel, 
    meta: { 
      requiresAuth: true,
      roles: ['admin'] 
    }
  }
]

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const userRoles = getUserRoles()
  
  if (to.meta.requiresAuth && !token) {
    next('/login')
    return
  }
  
  if (to.meta.roles && !hasPermission(userRoles, to.meta.roles)) {
    next('/403') // 无权限页面
    return
  }
  
  next()
})

动态路由方案：

// 权限管理store (Pinia)
export const useAuthStore = defineStore('auth', () => {
  const userInfo = ref(null)
  const permissions = ref([])
  
  const login = async (credentials) => {
    const response = await authAPI.login(credentials)
    userInfo.value = response.user
    permissions.value = response.permissions
    
    // 动态添加路由
    addRoutesFromPermissions(permissions.value)
  }
  
  return { userInfo, permissions, login }
})

// 动态路由添加
function addRoutesFromPermissions(permissions) {
  const asyncRoutes = [
    {
      path: '/admin',
      component: AdminLayout,
      children: generateAdminRoutes(permissions)
    }
  ]
  
  asyncRoutes.forEach(route => {
    router.addRoute(route)
  })
}

组件级权限控制：

<template>
  <div>
    <!-- 基于权限显示按钮 -->
    <button v-if="hasPermission('user:delete')" 
            @click="deleteUser">删除用户</button>
    
    <!-- 权限指令 -->
    <button v-permission="'admin:manage'">管理功能</button>
  </div>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const hasPermission = (permission) => {
  return authStore.permissions.includes(permission)
}
</script>

最佳实践：

• 前端权限控制仅用于用户体验，关键验证必须在后端
• 使用JWT token进行身份认证
• 权限信息可以存储在Vuex/Pinia中
• 提供权限不足的友好提示页面

What improvements does Vue 3’s virtual DOM diff algorithm have?

考察点：渲染优化机制。

答案：

Vue 3对虚拟DOM diff算法进行了重大优化，引入了编译时优化、静态标记和更高效的对比策略。主要改进包括静态提升、补丁标记、块级优化等，显著提升了渲染性能，特别是在大列表和频繁更新场景下。

主要优化策略：

1. 静态提升（Static Hoisting）

// 编译前
<div>
  <p>静态文本</p>
  <p>{{ message }}</p>
</div>

// 编译后优化
const _hoisted_1 = h("p", "静态文本") // 提升到render外部

function render() {
  return h("div", [
    _hoisted_1, // 复用静态节点
    h("p", ctx.message)
  ])
}

2. 补丁标记（Patch Flags）

// 编译时标记动态内容类型
h("div", {
  class: "container",
  id: dynamicId
}, [
  h("p", message, 1 /* TEXT */)  // 只有文本会变化
], 8 /* PROPS */) // 只有props会变化

性能提升要点：

• 跳过静态节点：静态内容不参与diff过程
• 精确更新：只对比标记为动态的部分
• 块级优化：将动态节点收集到数组中，减少遍历
• 事件缓存：事件处理器自动缓存，避免重新创建

对比Vue 2的改进：

• 编译时优化：更多优化在编译阶段完成
• 更少的运行时开销：减少不必要的对比操作
• 更好的Tree-shaking：未使用的功能可以被移除
• 更快的组件更新：精确的依赖追踪

What is the script setup syntax sugar? What are its advantages and disadvantages?

考察点：语法糖机制。

答案：

script setup是Vue 3.2+引入的语法糖，提供了更简洁的Composition API使用方式。它在编译时将<script setup>中的代码转换为标准的setup函数，减少了样板代码，提供了更好的性能和开发体验。

语法对比：

<!-- 传统Composition API -->
<script>
import { ref, computed } from 'vue'
import ChildComponent from './Child.vue'

export default {
  components: { ChildComponent },
  props: ['title'],
  emits: ['update'],
  setup(props, { emit }) {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    const increment = () => {
      count.value++
      emit('update', count.value)
    }
    
    return {
      count,
      doubleCount, 
      increment
    }
  }
}
</script>

<!-- script setup语法糖 -->
<script setup>
import { ref, computed } from 'vue'
import ChildComponent from './Child.vue'

const props = defineProps(['title'])
const emit = defineEmits(['update'])

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

const increment = () => {
  count.value++
  emit('update', count.value)
}
</script>

主要优势：

• 更简洁的语法：减少样板代码，提高开发效率
• 更好的性能：编译时优化，运行时开销更小
• 自动暴露：顶层变量自动暴露给模板
• 更好的TS支持：类型推断更准确
• 开发体验：热更新性能更佳

编译时宏：

<script setup>
// 编译时宏，仅在script setup中可用
defineProps()
defineEmits() 
defineExpose()
defineSlots()
withDefaults()
</script>

局限性：

• 调试复杂：编译后代码与源码差异较大
• 灵活性限制：某些高级用法需要回到传统语法
• 学习成本：需要理解编译时宏的概念
• 兼容性：需要Vue 3.2+版本支持

What is the purpose of toRefs and toRef? How to solve reactive loss problems?

考察点：响应式工具函数。

答案：

toRefs和toRef是Vue 3提供的响应式工具函数，用于解决reactive对象解构时响应式丢失的问题。它们在保持响应式连接的同时，允许更灵活的数据访问和传递，特别适用于组合函数返回值和props处理。

响应式丢失问题：

const state = reactive({
  name: 'John',
  age: 25
})

// 直接解构会丢失响应性
const { name, age } = state // ❌ 丢失响应性

// 使用toRefs保持响应性
const { name, age } = toRefs(state) // ✅ 保持响应性

toRefs用法：

// 将reactive对象的所有属性转换为ref
const state = reactive({
  count: 0,
  message: 'hello'
})

const stateAsRefs = toRefs(state)
// 等价于：
// {
//   count: ref(0),      // 与state.count保持同步
//   message: ref('hello') // 与state.message保持同步
// }

// 解构使用
const { count, message } = toRefs(state)
count.value++ // 会同步更新state.count

toRef用法：

// 为单个属性创建ref
const state = reactive({
  user: { name: 'John' }
})

// 为嵌套属性创建ref
const userName = toRef(state.user, 'name')
userName.value = 'Jane' // 会同步更新state.user.name

// 为不存在的属性创建ref
const newProp = toRef(state, 'nonexistent') // 不会报错

组合函数中的应用：

// 自定义hook返回响应式数据
export function useCounter() {
  const state = reactive({
    count: 0,
    doubleCount: computed(() => state.count * 2)
  })
  
  const increment = () => state.count++
  
  // 返回时使用toRefs保持响应性
  return {
    ...toRefs(state),
    increment
  }
}

// 使用时可以直接解构
const { count, doubleCount, increment } = useCounter()

最佳实践：

• 组合函数返回reactive对象时使用toRefs
• 需要传递单个响应式属性时使用toRef
• 避免过度使用，简单场景直接使用ref
• 注意与原对象的同步关系

How to handle error boundaries and exception catching in Vue 3?

考察点：错误处理机制。

答案：

Vue 3提供了多层次的错误处理机制，包括组件级错误捕获、全局错误处理和异步错误处理。通过合理配置错误边界，可以提升应用的健壮性和用户体验，防止局部错误导致整个应用崩溃。

组件级错误捕获：

<script setup>
import { onErrorCaptured, ref } from 'vue'

const error = ref(null)
const errorInfo = ref(null)

// 捕获子组件错误
onErrorCaptured((err, instance, info) => {
  error.value = err
  errorInfo.value = info
  
  console.error('组件错误:', err)
  console.error('错误信息:', info)
  
  // 返回false阻止错误继续向上传播
  return false
})
</script>

<template>
  <div v-if="error" class="error-boundary">
    <h3>出现错误</h3>
    <p>{{ error.message }}</p>
    <button @click="error = null">重试</button>
  </div>
  <div v-else>
    <!-- 正常组件内容 -->
    <ChildComponent />
  </div>
</template>

全局错误处理：

// main.js
const app = createApp(App)

// 全局错误处理器
app.config.errorHandler = (err, instance, info) => {
  console.error('全局错误:', err)
  
  // 错误上报
  if (process.env.NODE_ENV === 'production') {
    reportError(err, { 
      component: instance?.$options.name,
      info: info 
    })
  }
}

// 全局警告处理器
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue警告:', msg)
}

异步错误处理：

<script setup>
import { ref, onMounted } from 'vue'

const data = ref(null)
const loading = ref(false)
const error = ref(null)

const fetchData = async () => {
  try {
    loading.value = true
    error.value = null
    data.value = await api.getData()
  } catch (err) {
    error.value = err
    // 异步错误需要手动处理
    console.error('异步操作错误:', err)
  } finally {
    loading.value = false
  }
}

onMounted(fetchData)
</script>

结合Suspense的错误处理：

<template>
  <ErrorBoundary>
    <Suspense>
      <AsyncComponent />
      <template #fallback>
        <Loading />
      </template>
    </Suspense>
  </ErrorBoundary>
</template>

错误处理最佳实践：

• 在关键组件层级设置错误边界
• 区分开发环境和生产环境的错误处理策略
• 异步操作使用try-catch包装
• 提供用户友好的错误信息和恢复机制
• 建立错误监控和上报系统

What are the advanced usages of defineEmits and defineProps?

考察点：编译宏深度应用。

答案：

defineEmits和defineProps是Vue 3 script setup中的编译宏，提供了灵活的props和events定义方式。它们支持TypeScript类型声明、运行时验证、默认值设置等高级特性，是组件API设计的核心工具。

defineProps高级用法：

<script setup lang="ts">
// 1. TypeScript接口定义
interface Props {
  title: string
  count?: number
  users: User[]
  config?: {
    theme: 'light' | 'dark'
    size: 'small' | 'medium' | 'large'
  }
}

const props = defineProps<Props>()

// 2. 运行时props验证
const props = defineProps({
  title: {
    type: String,
    required: true,
    validator: (value: string) => value.length > 0
  },
  count: {
    type: Number,
    default: 0,
    validator: (value: number) => value >= 0
  },
  status: {
    type: String as PropType<'pending' | 'success' | 'error'>,
    default: 'pending'
  }
})

// 3. 默认值设置
const props = withDefaults(defineProps<Props>(), {
  count: 0,
  config: () => ({ theme: 'light', size: 'medium' })
})
</script>

defineEmits高级用法：

<script setup lang="ts">
// 1. 函数签名方式
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'change', id: number, value: string): void
  (e: 'delete', payload: { id: number; force?: boolean }): void
}>()

// 2. 对象语法与验证
const emit = defineEmits({
  'update:modelValue': (value: string) => {
    return typeof value === 'string' && value.length > 0
  },
  'change': (id: number, value: string) => {
    return Number.isInteger(id) && typeof value === 'string'
  },
  'submit': null // 无验证
})

// 3. 事件名称数组
const emit = defineEmits(['update:modelValue', 'change', 'submit'])
</script>

组合使用示例：

<script setup lang="ts">
interface Props {
  modelValue: string
  disabled?: boolean
  placeholder?: string
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'focus', event: FocusEvent): void
  (e: 'blur', event: FocusEvent): void
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  placeholder: '请输入...'
})

const emit = defineEmits<Emits>()

// 双向绑定实现
const updateValue = (value: string) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <input 
    :value="modelValue"
    :disabled="disabled"
    :placeholder="placeholder"
    @input="updateValue($event.target.value)"
    @focus="emit('focus', $event)"
    @blur="emit('blur', $event)"
  />
</template>

最佳实践：

• 优先使用TypeScript类型定义获得更好的开发体验
• 为复杂props提供运行时验证
• 使用withDefaults设置合理的默认值
• 事件命名遵循kebab-case约定
• 为events提供清晰的类型签名

How to optimize first-screen loading performance of Vue 3 applications?

考察点：性能优化策略。

答案：

Vue 3应用的首屏性能优化是一个系统工程，需要从代码分割、资源优化、渲染优化等多个维度进行。通过合理的优化策略，可以显著提升首屏加载速度和用户体验。

代码分割和懒加载：

// 1. 路由级代码分割
const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import(
      /* webpackChunkName: "about" */ './views/About.vue'
    )
  }
]

// 2. 组件懒加载
const HeavyComponent = defineAsyncComponent({
  loader: () => import('./components/HeavyComponent.vue'),
  loadingComponent: LoadingSkeleton,
  delay: 200
})

资源优化策略：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          ui: ['element-plus', 'ant-design-vue']
        }
      }
    }
  },
  // 开启gzip压缩
  plugins: [
    vue(),
    viteCompression({
      algorithm: 'gzip'
    })
  ]
}

首屏渲染优化：

<!-- 1. 骨架屏组件 -->
<template>
  <div v-if="loading" class="skeleton">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
  </div>
  <div v-else>
    <!-- 实际内容 -->
  </div>
</template>

<!-- 2. 虚拟滚动大列表 -->
<template>
  <VirtualList 
    :items="largeList"
    :item-height="50"
    :visible-count="20"
  />
</template>

关键资源优化：

<!-- index.html优化 -->
<head>
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- DNS预解析 -->
  <link rel="dns-prefetch" href="//api.example.com">
  
  <!-- 预连接重要域名 -->
  <link rel="preconnect" href="//cdn.example.com">
</head>

数据获取优化：

// 数据预加载和缓存
export function useAsyncData(key, fetcher, options = {}) {
  const data = ref(null)
  const loading = ref(false)
  
  // 检查缓存
  const cached = getCache(key)
  if (cached && !options.fresh) {
    data.value = cached
    return { data, loading }
  }
  
  const execute = async () => {
    loading.value = true
    try {
      const result = await fetcher()
      data.value = result
      setCache(key, result, options.ttl)
    } finally {
      loading.value = false
    }
  }
  
  execute()
  return { data, loading }
}

性能监控和度量：

// 性能监控
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime)
    }
  }
})

observer.observe({ entryTypes: ['largest-contentful-paint'] })

What are the best practices for provide/inject in complex component trees?

考察点：依赖注入模式。

答案：

provide/inject在复杂组件树中提供了优雅的跨级通信方案，但需要遵循一定的最佳实践来确保代码的可维护性和类型安全。合理使用可以避免props drilling问题，同时保持组件的解耦性。

基本使用模式：

<!-- 祖先组件 -->
<script setup>
import { provide, ref, readonly } from 'vue'

const theme = ref('light')
const user = ref({ name: 'John', role: 'admin' })

// 提供响应式数据
provide('theme', readonly(theme))
provide('user', readonly(user))

// 提供方法
provide('updateTheme', (newTheme) => {
  theme.value = newTheme
})
</script>

<!-- 后代组件 -->
<script setup>
import { inject } from 'vue'

const theme = inject('theme')
const user = inject('user')
const updateTheme = inject('updateTheme')

// 使用默认值
const config = inject('config', () => ({ 
  api: 'default-api' 
}))
</script>

类型安全的provide/inject：

// types.ts - 定义注入键
export interface AppContext {
  user: User
  theme: 'light' | 'dark'
  updateUser: (user: User) => void
}

export const AppContextKey: InjectionKey<AppContext> = Symbol('AppContext')

// 祖先组件
<script setup lang="ts">
const appContext: AppContext = {
  user: ref({ id: 1, name: 'John' }),
  theme: ref('light'),
  updateUser: (user: User) => {
    // 更新逻辑
  }
}

provide(AppContextKey, appContext)
</script>

// 后代组件
<script setup lang="ts">
const appContext = inject(AppContextKey)!
// 完整的类型支持
</script>

复杂状态管理模式：

<script setup>
// 创建响应式store
const createAppStore = () => {
  const state = reactive({
    user: null,
    settings: {},
    loading: false
  })
  
  const actions = {
    async login(credentials) {
      state.loading = true
      try {
        state.user = await authAPI.login(credentials)
      } finally {
        state.loading = false
      }
    },
    
    updateSettings(newSettings) {
      Object.assign(state.settings, newSettings)
    }
  }
  
  const getters = {
    isLoggedIn: computed(() => !!state.user),
    userName: computed(() => state.user?.name || 'Guest')
  }
  
  return {
    state: readonly(state),
    ...actions,
    ...getters
  }
}

// 在根组件中提供
const store = createAppStore()
provide('appStore', store)
</script>

组合函数封装：

// useAppContext.js
export function useAppContext() {
  const context = inject(AppContextKey)
  if (!context) {
    throw new Error('useAppContext must be used within AppProvider')
  }
  return context
}

// useTheme.js
export function useTheme() {
  const { theme, updateTheme } = useAppContext()
  
  const isDark = computed(() => theme.value === 'dark')
  const toggleTheme = () => {
    updateTheme(isDark.value ? 'light' : 'dark')
  }
  
  return {
    theme: readonly(theme),
    isDark,
    toggleTheme
  }
}

最佳实践原则：

• 使用Symbol作为注入键避免命名冲突
• 提供的状态使用readonly保护
• 为inject提供默认值和类型检查
• 复杂逻辑封装成组合函数
• 避免过度使用，简单父子通信优先用props
• 文档化provide/inject的契约关系

How to implement SSR (Server-Side Rendering) in Vue 3?

考察点：SSR技术应用。

答案：

Vue 3的SSR通过vue/server-renderer实现，将Vue组件在服务端渲染为HTML字符串，然后在客户端进行hydration。现代SSR通常结合Nuxt 3、Vite SSR或自定义Node.js服务器实现。

基本SSR实现：

// server.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createRouter, createMemoryHistory } from 'vue-router'

const createApp = () => {
  const app = createSSRApp(App)
  
  const router = createRouter({
    history: createMemoryHistory(),
    routes
  })
  
  app.use(router)
  return { app, router }
}

// 服务器路由处理
app.get('*', async (req, res) => {
  const { app, router } = createApp()
  
  // 等待路由就绪
  await router.push(req.originalUrl)
  await router.isReady()
  
  // 渲染应用
  const html = await renderToString(app)
  
  // 返回完整HTML
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR App</title></head>
      <body>
        <div id="app">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `)
})

客户端hydration：

// client.js
import { createSSRApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const createApp = () => {
  const app = createSSRApp(App)
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  app.use(router)
  return { app, router }
}

const { app, router } = createApp()

router.isReady().then(() => {
  app.mount('#app') // hydrate existing SSR content
})

状态同步处理：

// 服务端状态注入
app.get('*', async (req, res) => {
  const { app, router } = createApp()
  
  // 获取初始数据
  const initialState = await getInitialState(req)
  
  // 注入到应用中
  app.provide('initialState', initialState)
  
  const html = await renderToString(app)
  
  res.send(`
    <div id="app">${html}</div>
    <script>
      window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
    </script>
  `)
})

// 客户端状态恢复
const { app, router } = createApp()

// 恢复服务端状态
if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
  app.provide('initialState', window.__INITIAL_STATE__)
}

现代SSR框架（Nuxt 3）：

<!-- pages/index.vue -->
<script setup>
// 服务端和客户端都会执行
const { data: posts } = await $fetch('/api/posts')

// 仅在服务端执行
const { data: seoData } = await $fetch('/api/seo', {
  server: true
})

// 客户端导航时执行
const { pending, data } = await useLazyFetch('/api/user')
</script>

<template>
  <div>
    <Head>
      <Title>{{ seoData.title }}</Title>
    </Head>
    
    <div v-if="pending">Loading...</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

SSR优化策略：

• 使用流式渲染提升TTFB
• 实施组件级缓存减少渲染开销
• 合理的数据预取策略
• 客户端激活优化避免闪烁
• CDN部署和边缘渲染

What is the source code implementation principle of Vue 3’s reactive system? How to implement dependency collection and trigger updates?

考察点：响应式源码分析。

答案：

Vue 3响应式系统基于Proxy和Reflect API实现，核心包括响应式转换、依赖收集、触发更新三个部分。系统使用WeakMap存储依赖关系，通过effect函数建立响应式连接，实现了高效的数据变更检测和更新机制。

核心数据结构：

// 依赖映射关系
const targetMap = new WeakMap()
// WeakMap {
//   target: Map {
//     key: Set [effect1, effect2, ...]
//   }
// }

let activeEffect = undefined
const effectStack = []

响应式转换实现：

// reactive实现原理
function reactive(target) {
  if (!isObject(target)) return target
  
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver)
      
      // 依赖收集
      track(target, 'get', key)
      
      // 嵌套对象递归处理
      if (isObject(result)) {
        return reactive(result)
      }
      
      return result
    },
    
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // 值变化时触发更新
      if (hasChanged(value, oldValue)) {
        trigger(target, 'set', key, value, oldValue)
      }
      
      return result
    },
    
    deleteProperty(target, key) {
      const hadKey = hasOwn(target, key)
      const result = Reflect.deleteProperty(target, key)
      
      if (result && hadKey) {
        trigger(target, 'delete', key)
      }
      
      return result
    }
  })
}

依赖收集机制：

function track(target, type, key) {
  // 没有活跃的effect，直接返回
  if (!activeEffect) return
  
  // 获取target对应的依赖Map
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  
  // 获取key对应的effect Set
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  
  // 建立双向依赖关系
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
  }
}

触发更新机制：

function trigger(target, type, key, newValue, oldValue) {
  // 获取依赖Map
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  // 收集需要触发的effects
  const effects = new Set()
  
  // 添加直接依赖
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => effects.add(effect))
  }
  
  // 处理数组length变化等特殊情况
  if (type === 'add' && isArray(target)) {
    const lengthDep = depsMap.get('length')
    if (lengthDep) {
      lengthDep.forEach(effect => effects.add(effect))
    }
  }
  
  // 执行effects
  effects.forEach(effect => {
    if (effect !== activeEffect) {
      if (effect.scheduler) {
        effect.scheduler()
      } else {
        effect()
      }
    }
  })
}

Effect函数实现：

function effect(fn, options = {}) {
  const effect = function reactiveEffect(...args) {
    if (effectStack.indexOf(effect) === -1) {
      cleanup(effect) // 清理之前的依赖
      
      try {
        effectStack.push(effect)
        activeEffect = effect
        return fn(...args) // 执行函数，触发依赖收集
      } finally {
        effectStack.pop()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  }
  
  effect.deps = []
  effect.scheduler = options.scheduler
  
  if (!options.lazy) {
    effect() // 立即执行
  }
  
  return effect
}

关键优化点：

• 使用WeakMap避免内存泄漏
• effectStack处理嵌套effect
• 调度器支持异步更新
• cleanup避免无效依赖累积

How to implement a custom Vue 3 renderer?

考察点：渲染器架构设计。

答案：

Vue 3的渲染器采用平台无关的设计，通过createRenderer API可以创建自定义渲染器。渲染器需要实现节点操作、属性处理、事件绑定等平台特定的功能，从而支持不同的渲染目标如Canvas、WebGL、移动端等。

基本渲染器结构：

import { createRenderer } from '@vue/runtime-core'

// 自定义节点操作API
const nodeOps = {
  // 创建元素
  createElement(tag) {
    return { tag, children: [], props: {} }
  },
  
  // 创建文本节点
  createText(text) {
    return { type: 'text', text }
  },
  
  // 插入节点
  insert(child, parent, anchor) {
    if (anchor) {
      const index = parent.children.indexOf(anchor)
      parent.children.splice(index, 0, child)
    } else {
      parent.children.push(child)
    }
  },
  
  // 移除节点
  remove(child) {
    const parent = child.parent
    if (parent) {
      const index = parent.children.indexOf(child)
      parent.children.splice(index, 1)
    }
  },
  
  // 设置文本内容
  setElementText(node, text) {
    node.children = [{ type: 'text', text }]
  },
  
  // 父子关系
  parentNode(node) {
    return node.parent
  },
  
  nextSibling(node) {
    const parent = node.parent
    if (!parent) return null
    const index = parent.children.indexOf(node)
    return parent.children[index + 1] || null
  }
}

属性处理实现：

const patchProp = (el, key, prevValue, nextValue) => {
  switch (key) {
    case 'class':
      el.props.class = nextValue
      break
    case 'style':
      el.props.style = nextValue
      break
    default:
      if (key.startsWith('on')) {
        // 事件处理
        const eventName = key.slice(2).toLowerCase()
        el.props[eventName] = nextValue
      } else {
        // 普通属性
        if (nextValue == null) {
          delete el.props[key]
        } else {
          el.props[key] = nextValue
        }
      }
  }
}

创建渲染器：

const renderer = createRenderer({
  ...nodeOps,
  patchProp
})

// 使用自定义渲染器
const { createApp } = renderer

const app = createApp({
  data() {
    return { message: 'Hello Custom Renderer!' }
  },
  template: '<div>{{ message }}</div>'
})

// 渲染到自定义容器
app.mount(customContainer)

Canvas渲染器示例：

const canvasNodeOps = {
  createElement(tag) {
    return {
      tag,
      type: 'element',
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      children: []
    }
  },
  
  insert(child, parent) {
    parent.children.push(child)
    child.parent = parent
    
    // 触发Canvas重绘
    requestAnimationFrame(() => {
      redrawCanvas(getRootContainer(parent))
    })
  },
  
  remove(child) {
    const parent = child.parent
    const index = parent.children.indexOf(child)
    parent.children.splice(index, 1)
    
    // 触发Canvas重绘
    requestAnimationFrame(() => {
      redrawCanvas(getRootContainer(parent))
    })
  }
}

const canvasPatchProp = (el, key, prevValue, nextValue) => {
  switch (key) {
    case 'x':
    case 'y':
    case 'width':
    case 'height':
      el[key] = nextValue
      break
    case 'fillStyle':
      el.fillStyle = nextValue
      break
    case 'onClick':
      el.onClick = nextValue
      break
  }
}

// Canvas绘制函数
function redrawCanvas(container) {
  const canvas = container.canvas
  const ctx = canvas.getContext('2d')
  
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  function drawNode(node) {
    if (node.tag === 'rect') {
      ctx.fillStyle = node.fillStyle || '#000'
      ctx.fillRect(node.x, node.y, node.width, node.height)
    }
    
    node.children.forEach(drawNode)
  }
  
  container.children.forEach(drawNode)
}

使用场景：

• 游戏引擎渲染
• 图表可视化库
• 移动端原生渲染
• IoT设备界面
• 3D场景渲染

What are Vue 3’s compile-time optimization strategies? How do static hoisting and patch flags work?

考察点：编译优化原理。

答案：

Vue 3通过编译时分析和优化，在构建阶段识别静态内容和动态部分，生成更高效的渲染代码。主要优化策略包括静态提升、补丁标记、块级优化和内联组件props等，显著减少运行时开销。

静态提升（Static Hoisting）：

// 编译前模板
<div>
  <h1>Static Title</h1>
  <p>{{ message }}</p>
  <span>Static Text</span>
</div>

// 编译后优化（静态提升）
const _hoisted_1 = h("h1", "Static Title")
const _hoisted_2 = h("span", "Static Text")

function render(_ctx) {
  return h("div", [
    _hoisted_1, // 静态节点被提升，避免重复创建
    h("p", _ctx.message),
    _hoisted_2
  ])
}

补丁标记（Patch Flags）：

// 编译时生成的补丁标记
export const enum PatchFlags {
  TEXT = 1,          // 动态文本
  CLASS = 1 << 1,    // 动态class
  STYLE = 1 << 2,    // 动态style
  PROPS = 1 << 3,    // 动态props
  FULL_PROPS = 1 << 4, // 完整props对象
  HYDRATE_EVENTS = 1 << 5, // 事件监听器
  STABLE_FRAGMENT = 1 << 6, // 稳定fragment
  KEYED_FRAGMENT = 1 << 7,  // 带key的fragment
  UNKEYED_FRAGMENT = 1 << 8, // 无key的fragment
  NEED_PATCH = 1 << 9,      // 需要patch
  DYNAMIC_SLOTS = 1 << 10,  // 动态插槽
  HOISTED = -1,             // 静态提升
  BAIL = -2                 // diff算法回退
}

// 使用补丁标记的渲染函数
function render(_ctx) {
  return h("div", {
    class: _ctx.dynamicClass,
    id: "static-id"
  }, [
    h("p", _ctx.message, 1 /* TEXT */), // 只有文本内容是动态的
    h("span", {
      style: _ctx.dynamicStyle
    }, "static", 4 /* STYLE */) // 只有style是动态的
  ], 2 /* CLASS */) // 只有class是动态的
}

块级优化（Block Tree）：

// 动态节点收集
const dynamicChildren = []

function render(_ctx) {
  return (openBlock(), createElementBlock("div", null, [
    // 静态节点被跳过
    createStaticVNode("<h1>Static</h1>", 1),
    
    // 动态节点被收集
    createElementVNode("p", null, _ctx.message, 1 /* TEXT */),
    
    (_ctx.show) 
      ? (createElementVNode("span", { key: 0 }, "Conditional", 1 /* TEXT */))
      : createCommentVNode("", true)
  ], 64 /* STABLE_FRAGMENT */))
}

预字符串化优化：

// 大量静态内容预字符串化
function render(_ctx) {
  return h("div", [
    // 大量静态HTML被预编译为字符串
    createStaticVNode(`
      <header>
        <nav>
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </nav>
      </header>
    `, 5), // 静态节点数量
    
    // 动态内容
    h("main", _ctx.content)
  ])
}

编译器优化配置：

// vite.config.js
export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 启用优化
          hoistStatic: true,
          cacheHandlers: true,
          
          // 自定义转换
          nodeTransforms: [
            // 自定义节点转换
          ],
          
          directiveTransforms: {
            // 自定义指令转换
          }
        }
      }
    })
  ]
}

性能提升效果：

• 创建VNode数量减少70-80%
• 内存使用降低
• 首屏渲染速度提升
• 更新性能显著改善
• 包体积减小（tree-shaking）

How to design the architecture of a large Vue 3 project? What are the best practices for modularization and componentization?

考察点：架构设计能力。

答案：

大型Vue 3项目架构设计需要考虑可扩展性、可维护性和团队协作效率。核心原则是合理的分层架构、模块化设计、组件复用策略和统一的开发规范，确保项目在规模增长时仍能保持良好的开发体验。

整体架构设计：

src/
├── api/                 # API接口层
│   ├── modules/         # 按业务模块分组
│   ├── interceptors/    # 请求拦截器
│   └── types/          # API类型定义
├── assets/             # 静态资源
├── components/         # 通用组件库
│   ├── base/           # 基础UI组件
│   ├── business/       # 业务组件
│   └── layout/         # 布局组件
├── composables/        # 组合函数
├── stores/             # 状态管理
│   ├── modules/        # 按功能分模块
│   └── types/          # Store类型
├── router/             # 路由配置
├── utils/              # 工具函数
├── views/              # 页面组件
│   ├── user/           # 用户模块
│   ├── product/        # 产品模块
│   └── admin/          # 管理模块
├── styles/             # 样式文件
└── types/              # 全局类型定义

分层架构实现：

// api层 - 统一接口管理
// api/base.ts
export class BaseAPI {
  private http = createHttpClient()
  
  protected async request<T>(config: RequestConfig): Promise<ApiResponse<T>> {
    try {
      const response = await this.http.request(config)
      return this.handleResponse(response)
    } catch (error) {
      return this.handleError(error)
    }
  }
}

// api/modules/user.ts
export class UserAPI extends BaseAPI {
  async getUsers(params: UserQueryParams): Promise<User[]> {
    return this.request({
      method: 'GET',
      url: '/users',
      params
    })
  }
  
  async createUser(data: CreateUserData): Promise<User> {
    return this.request({
      method: 'POST',
      url: '/users',
      data
    })
  }
}

export const userAPI = new UserAPI()

组件化最佳实践：

<!-- 基础组件 - BaseButton.vue -->
<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary' | 'danger'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'medium',
  disabled: false,
  loading: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const buttonClass = computed(() => [
  'base-button',
  `base-button--${props.variant}`,
  `base-button--${props.size}`,
  {
    'base-button--disabled': props.disabled,
    'base-button--loading': props.loading
  }
])
</script>

<template>
  <button 
    :class="buttonClass"
    :disabled="disabled || loading"
    @click="emit('click', $event)"
  >
    <LoadingSpinner v-if="loading" />
    <slot v-else />
  </button>
</template>

状态管理架构：

// stores/modules/user.ts
export const useUserStore = defineStore('user', () => {
  // State
  const users = ref<User[]>([])
  const currentUser = ref<User | null>(null)
  const loading = ref(false)
  
  // Getters
  const userCount = computed(() => users.value.length)
  const isLoggedIn = computed(() => !!currentUser.value)
  
  // Actions
  const fetchUsers = async (params?: UserQueryParams) => {
    loading.value = true
    try {
      users.value = await userAPI.getUsers(params)
    } finally {
      loading.value = false
    }
  }
  
  const login = async (credentials: LoginCredentials) => {
    const user = await authAPI.login(credentials)
    currentUser.value = user
    
    // 存储到localStorage
    localStorage.setItem('user', JSON.stringify(user))
  }
  
  return {
    // State
    users: readonly(users),
    currentUser: readonly(currentUser), 
    loading: readonly(loading),
    
    // Getters
    userCount,
    isLoggedIn,
    
    // Actions
    fetchUsers,
    login
  }
})

组合函数设计：

// composables/useAsyncOperation.ts
export function useAsyncOperation<T, P extends any[]>(
  operation: (...args: P) => Promise<T>,
  options: AsyncOperationOptions = {}
) {
  const loading = ref(false)
  const error = ref<Error | null>(null)
  const data = ref<T | null>(null)
  
  const execute = async (...args: P) => {
    try {
      loading.value = true
      error.value = null
      
      const result = await operation(...args)
      data.value = result
      
      return result
    } catch (err) {
      error.value = err as Error
      
      if (options.onError) {
        options.onError(err as Error)
      }
      
      throw err
    } finally {
      loading.value = false
    }
  }
  
  return {
    loading: readonly(loading),
    error: readonly(error),
    data: readonly(data),
    execute
  }
}

// 使用示例
const { loading, error, data, execute } = useAsyncOperation(
  userAPI.getUsers,
  {
    onError: (error) => {
      notification.error(`获取用户失败: ${error.message}`)
    }
  }
)

模块化路由设计：

// router/modules/user.ts
export default {
  path: '/user',
  component: () => import('@/layouts/DefaultLayout.vue'),
  children: [
    {
      path: '',
      name: 'UserList',
      component: () => import('@/views/user/UserList.vue'),
      meta: { 
        title: '用户列表',
        requiresAuth: true,
        permissions: ['user:read']
      }
    },
    {
      path: 'create',
      name: 'UserCreate', 
      component: () => import('@/views/user/UserCreate.vue'),
      meta: {
        title: '创建用户',
        requiresAuth: true,
        permissions: ['user:create']
      }
    }
  ]
} as RouteRecordRaw

// router/index.ts - 自动导入模块路由
const modules = import.meta.glob('./modules/*.ts', { eager: true })
const routes = Object.values(modules).map(m => m.default)

开发规范和工具链：

• 代码规范：ESLint + Prettier + TypeScript strict模式
• 提交规范：Conventional Commits + Commitizen
• 测试策略：单元测试(Vitest) + E2E测试(Playwright)
• 文档工具：Storybook组件文档 + VitePress项目文档
• CI/CD：自动化测试、构建、部署流水线

How is asynchronous dependency injection implemented in Vue 3? What problems does it solve?

考察点：异步注入机制。

答案：

Vue 3的异步依赖注入通过Suspense组件和异步setup函数实现，允许组件在初始化过程中等待异步数据加载完成。这解决了传统同步组件中异步数据获取的复杂性问题，提供了更优雅的加载状态管理。

异步setup实现：

<script setup>
// 异步setup - 返回Promise
const userInfo = await fetchUserProfile()
const permissions = await fetchUserPermissions()

// 这些数据在组件渲染前已经就绪
provide('userInfo', userInfo)
provide('permissions', permissions)
</script>

Suspense协调异步组件：

<template>
  <Suspense>
    <!-- 异步组件树 -->
    <AsyncParentComponent />
    
    <!-- 统一的加载状态 -->
    <template #fallback>
      <div class="loading">
        <LoadingSkeleton />
      </div>
    </template>
  </Suspense>
</template>

异步依赖注入的实现原理：

// Vue内部的异步组件处理
function setupAsyncComponent(instance) {
  const { setup } = instance.type
  
  if (setup) {
    const setupResult = setup(instance.props, {
      attrs: instance.attrs,
      slots: instance.slots,
      emit: instance.emit,
      expose: instance.expose
    })
    
    // 检测是否返回Promise
    if (isPromise(setupResult)) {
      // 异步setup处理
      instance.asyncDep = setupResult.then(
        (resolvedResult) => {
          // 处理resolved结果
          handleSetupResult(instance, resolvedResult)
        },
        (error) => {
          // 错误处理
          handleSetupError(instance, error)
        }
      )
    }
  }
}

复杂异步依赖场景：

<script setup>
// 并行异步数据获取
const [userProfile, userSettings, notifications] = await Promise.all([
  fetchUserProfile(),
  fetchUserSettings(), 
  fetchNotifications()
])

// 依赖链异步加载
const organization = await fetchOrganization(userProfile.orgId)
const projects = await fetchProjects(organization.id)

// 条件异步加载
const adminData = userProfile.role === 'admin' 
  ? await fetchAdminData() 
  : null

// 提供给子组件
provide('appData', {
  user: userProfile,
  settings: userSettings,
  notifications,
  organization,
  projects,
  adminData
})
</script>

解决的核心问题：

• 加载状态统一管理：避免各组件独立处理loading状态
• 数据依赖简化：异步数据在渲染前就绪，组件逻辑更简单
• 错误边界集中：异步错误可以在Suspense层级统一捕获
• 性能优化：避免多次渲染和数据请求瀑布流

How to implement a high-performance Vue 3 component library? What technical details need to be considered?

考察点：组件库工程化。

答案：

高性能Vue 3组件库需要从架构设计、性能优化、构建配置、开发体验等多个维度进行优化。关键考虑包括Tree-shaking支持、按需加载、TypeScript完整支持、主题定制、无障碍访问等。

组件库架构设计：

packages/
├── core/                # 核心组件
│   ├── button/
│   ├── input/
│   └── index.ts
├── utils/               # 工具函数
├── theme/               # 主题系统
├── icons/               # 图标库
├── composables/         # 组合函数
├── directives/          # 指令库
└── playground/          # 开发调试

高性能组件实现：

<!-- BaseButton.vue -->
<script setup lang="ts">
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'small' | 'medium' | 'large'
  disabled?: boolean
  loading?: boolean
  icon?: string
}

const props = withDefaults(defineProps<ButtonProps>(), {
  variant: 'primary',
  size: 'medium'
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

// 使用computed优化class计算
const buttonClass = computed(() => {
  const base = 'el-button'
  const classes = [
    base,
    `${base}--${props.variant}`,
    `${base}--${props.size}`
  ]
  
  if (props.disabled) classes.push(`${base}--disabled`)
  if (props.loading) classes.push(`${base}--loading`)
  
  return classes
})

// 事件处理优化
const handleClick = (event: MouseEvent) => {
  if (props.disabled || props.loading) return
  emit('click', event)
}
</script>

<template>
  <button 
    :class="buttonClass"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <Icon v-if="loading" name="loading" class="el-button__loading" />
    <Icon v-else-if="icon" :name="icon" class="el-button__icon" />
    <span v-if="$slots.default" class="el-button__text">
      <slot />
    </span>
  </button>
</template>

<style scoped>
/* 使用CSS变量支持主题定制 */
.el-button {
  --el-button-bg: var(--el-color-primary);
  --el-button-color: var(--el-color-white);
  --el-button-border: var(--el-border-color-base);
  
  background: var(--el-button-bg);
  color: var(--el-button-color);
  border: 1px solid var(--el-button-border);
  
  /* 性能优化 */
  will-change: transform;
  transform: translateZ(0);
}

.el-button--loading {
  pointer-events: none;
}

.el-button__loading {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

构建配置优化：

// vite.config.ts
export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'ElementPlus',
      formats: ['es', 'umd', 'cjs']
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        },
        // 分包策略
        manualChunks: {
          'components': ['./src/components/index.ts'],
          'utils': ['./src/utils/index.ts'],
          'directives': ['./src/directives/index.ts']
        }
      }
    },
    // CSS代码分割
    cssCodeSplit: true
  },
  
  // 插件配置
  plugins: [
    vue(),
    dts(), // 生成类型声明
    // 按需导入插件
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

Tree-shaking支持：

// src/index.ts - 支持按需导入
export { default as Button } from './button'
export { default as Input } from './input'
export { default as Select } from './select'

// 全量导入
export * from './components'

// 安装器
export const install = (app: App) => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

export default { install }

主题系统实现：

// theme/default.scss
:root {
  // 色彩系统
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  
  // 尺寸系统  
  --el-size-base: 14px;
  --el-border-radius-base: 4px;
  
  // 间距系统
  --el-spacing-xs: 4px;
  --el-spacing-sm: 8px;
  --el-spacing-md: 16px;
  --el-spacing-lg: 24px;
}

// 暗色主题
[data-theme="dark"] {
  --el-color-primary: #337ecc;
  --el-bg-color: #141414;
  --el-text-color-primary: rgba(255, 255, 255, 0.9);
}

性能优化技术细节：

• 虚拟滚动：大数据列表组件使用虚拟滚动
• 懒加载：图片、图标等资源按需加载
• 事件委托：减少事件监听器数量
• 防抖节流：输入组件使用防抖优化
• 缓存优化：计算属性和组合函数结果缓存

What is Vue 3’s Hydration process? How to handle state synchronization between client and server?

考察点：SSR同构原理。

答案：

Hydration是SSR应用中客户端接管服务端渲染HTML的过程，Vue 3通过hydrateRoot API实现。核心是将服务端静态HTML转换为响应式的Vue应用，同时保持DOM结构不变，只绑定事件和建立响应式连接。

Hydration基本流程：

// 客户端hydration入口
import { createSSRApp } from 'vue'
import { hydrateRoot } from 'vue/client'

const app = createSSRApp(App)

// 恢复服务端状态
if (typeof window !== 'undefined') {
  const initialState = window.__INITIAL_STATE__
  if (initialState) {
    // 恢复Pinia状态
    const pinia = createPinia()
    pinia.state.value = initialState.pinia
    app.use(pinia)
    
    // 恢复路由状态
    router.replace(initialState.route)
  }
}

// 等待路由就绪后进行hydration
router.isReady().then(() => {
  app.mount('#app', true) // 第二个参数表示hydration模式
})

服务端状态序列化：

// server.js
app.get('*', async (req, res) => {
  const { app, router, pinia } = createApp()
  
  // 路由处理
  await router.push(req.originalUrl)
  await router.isReady()
  
  // 预取数据
  const matchedComponents = router.currentRoute.value.matched
  await Promise.all(
    matchedComponents.map(component => {
      if (component.meta?.asyncData) {
        return component.meta.asyncData({ 
          route: router.currentRoute.value,
          store: pinia 
        })
      }
    })
  )
  
  // 渲染HTML
  const html = await renderToString(app)
  
  // 序列化状态
  const initialState = {
    pinia: pinia.state.value,
    route: router.currentRoute.value.fullPath
  }
  
  res.send(renderHTML(html, initialState))
})

function renderHTML(appHTML, initialState) {
  return `
    <!DOCTYPE html>
    <html>
      <head><title>SSR App</title></head>
      <body>
        <div id="app">${appHTML}</div>
        <script>
          window.__INITIAL_STATE__ = ${JSON.stringify(initialState).replace(/</g, '\\u003c')}
        </script>
        <script src="/client.js"></script>
      </body>
    </html>
  `
}

Hydration不匹配处理：

// 开发环境hydration不匹配警告
if (process.env.NODE_ENV === 'development') {
  app.config.warnHandler = (msg, instance, trace) => {
    if (msg.includes('Hydration')) {
      console.warn('Hydration mismatch:', msg)
      console.log('Component:', instance)
      console.log('Trace:', trace)
    }
  }
}

// 常见不匹配场景处理
<template>
  <!-- 避免客户端特定内容 -->
  <div v-if="!isSSR">
    {{ new Date().toLocaleString() }}
  </div>
  
  <!-- 使用ClientOnly组件 -->
  <ClientOnly>
    <UserLocationWidget />
    <template #fallback>
      <div>Loading location...</div>
    </template>
  </ClientOnly>
</template>

<script setup>
const isSSR = ref(true)

onMounted(() => {
  isSSR.value = false
})
</script>

状态同步最佳实践：

// 通用状态管理hook
export function useSSRState(key, defaultValue, fetcher) {
  const nuxtApp = useNuxtApp()
  const state = useState(key, () => defaultValue)
  
  // 服务端预取
  if (process.server) {
    return useLazyAsyncData(key, fetcher)
  }
  
  // 客户端激活后获取
  if (process.client && !state.value) {
    refreshCookie()
    return useLazyAsyncData(key, fetcher)
  }
  
  return { data: state }
}

// 使用示例
const { data: user } = await useSSRState(
  'user',
  null,
  () => $fetch('/api/user')
)

What are the advanced application scenarios of defineExpose in component encapsulation?

考察点：组件暴露机制。

答案：

defineExpose用于在script setup中显式暴露组件内部的方法和属性，主要应用于需要命令式操作的组件、复杂交互组件和第三方库集成场景。它提供了受控的组件API暴露机制。

表单组件验证场景：

<!-- FormItem.vue -->
<script setup lang="ts">
interface FormItemInstance {
  validate: () => Promise<boolean>
  clearValidation: () => void
  resetField: () => void
}

const props = defineProps<{
  prop: string
  rules?: ValidationRule[]
}>()

const fieldValue = defineModel<any>()
const errorMessage = ref('')
const isValid = ref(true)

const validate = async (): Promise<boolean> => {
  if (!props.rules) return true
  
  try {
    await validateField(fieldValue.value, props.rules)
    errorMessage.value = ''
    isValid.value = true
    return true
  } catch (error) {
    errorMessage.value = error.message
    isValid.value = false
    return false
  }
}

const clearValidation = () => {
  errorMessage.value = ''
  isValid.value = true
}

const resetField = () => {
  fieldValue.value = undefined
  clearValidation()
}

// 暴露验证接口
defineExpose({
  validate,
  clearValidation,
  resetField,
  prop: props.prop,
  isValid: readonly(isValid)
} as FormItemInstance)
</script>

<!-- 父组件使用 -->
<script setup>
const formItems = ref<FormItemInstance[]>([])

const validateAll = async () => {
  const results = await Promise.all(
    formItems.value.map(item => item.validate())
  )
  return results.every(Boolean)
}

const resetForm = () => {
  formItems.value.forEach(item => item.resetField())
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <FormItem 
      ref="formItems"
      prop="username"
      :rules="usernameRules"
      v-model="form.username"
    />
    <FormItem 
      ref="formItems"
      prop="email" 
      :rules="emailRules"
      v-model="form.email"
    />
  </form>
</template>

媒体播放器控制：

<!-- VideoPlayer.vue -->
<script setup lang="ts">
interface VideoPlayerInstance {
  play: () => Promise<void>
  pause: () => void
  seek: (time: number) => void
  setVolume: (volume: number) => void
  getCurrentTime: () => number
  getDuration: () => number
  isPlaying: Ref<boolean>
}

const videoRef = ref<HTMLVideoElement>()
const isPlaying = ref(false)
const currentTime = ref(0)

const play = async () => {
  if (videoRef.value) {
    await videoRef.value.play()
    isPlaying.value = true
  }
}

const pause = () => {
  if (videoRef.value) {
    videoRef.value.pause()
    isPlaying.value = false
  }
}

const seek = (time: number) => {
  if (videoRef.value) {
    videoRef.value.currentTime = time
    currentTime.value = time
  }
}

const setVolume = (volume: number) => {
  if (videoRef.value) {
    videoRef.value.volume = Math.max(0, Math.min(1, volume))
  }
}

const getCurrentTime = () => currentTime.value
const getDuration = () => videoRef.value?.duration || 0

// 监听播放状态
onMounted(() => {
  if (videoRef.value) {
    videoRef.value.addEventListener('timeupdate', () => {
      currentTime.value = videoRef.value!.currentTime
    })
  }
})

defineExpose({
  play,
  pause,
  seek,
  setVolume,
  getCurrentTime,
  getDuration,
  isPlaying: readonly(isPlaying)
} as VideoPlayerInstance)
</script>

第三方库集成：

<!-- EChartsChart.vue -->
<script setup lang="ts">
import * as echarts from 'echarts'

interface ChartInstance {
  resize: () => void
  setOption: (option: EChartsOption) => void
  getDataURL: () => string
  dispose: () => void
  showLoading: () => void
  hideLoading: () => void
}

const props = defineProps<{
  option: EChartsOption
  theme?: string
}>()

const chartRef = ref<HTMLDivElement>()
let chartInstance: echarts.ECharts | null = null

onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value, props.theme)
    chartInstance.setOption(props.option)
  }
})

onUnmounted(() => {
  chartInstance?.dispose()
})

const resize = () => {
  chartInstance?.resize()
}

const setOption = (option: EChartsOption) => {
  chartInstance?.setOption(option)
}

const getDataURL = () => {
  return chartInstance?.getDataURL() || ''
}

const dispose = () => {
  chartInstance?.dispose()
  chartInstance = null
}

const showLoading = () => {
  chartInstance?.showLoading()
}

const hideLoading = () => {
  chartInstance?.hideLoading()
}

// 暴露图表操作接口
defineExpose({
  resize,
  setOption,
  getDataURL,
  dispose,
  showLoading,
  hideLoading
} as ChartInstance)
</script>

高级应用场景：

• 复合组件通信：父组件直接调用子组件方法
• 库组件封装：暴露第三方库的核心API
• 工具类组件：提供可复用的工具方法
• 动画控制：暴露动画的启停和配置接口
• 数据操作：暴露数据刷新和状态重置方法

How to implement micro-frontend architecture in Vue 3? What technical challenges need to be solved?

考察点：微前端架构。

答案：

Vue 3微前端架构通过模块联邦、single-spa或自定义加载器实现多个独立Vue应用的集成。核心挑战包括应用隔离、状态共享、路由协调、样式冲突和构建优化等技术问题。

Module Federation实现：

// 主应用配置 (webpack.config.js)
const ModuleFederationPlugin = require('@module-federation/webpack')

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'shell',
      remotes: {
        userApp: 'userApp@http://localhost:3001/remoteEntry.js',
        productApp: 'productApp@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        vue: { singleton: true, eager: true },
        'vue-router': { singleton: true },
        pinia: { singleton: true }
      }
    })
  ]
}

// 主应用路由配置
const routes = [
  {
    path: '/user/:pathMatch(.*)*',
    component: () => import('userApp/App'),
    props: route => ({ basePath: '/user' })
  },
  {
    path: '/product/:pathMatch(.*)*', 
    component: () => import('productApp/App'),
    props: route => ({ basePath: '/product' })
  }
]

子应用暴露配置：

// 用户应用 (webpack.config.js)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'userApp',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.vue',
        './UserList': './src/components/UserList.vue'
      },
      shared: {
        vue: { singleton: true },
        'vue-router': { singleton: true }
      }
    })
  ]
}

// 子应用适配器
export default defineComponent({
  props: ['basePath'],
  setup(props) {
    const router = createRouter({
      history: createWebHistory(props.basePath),
      routes: userRoutes
    })
    
    const pinia = createPinia()
    
    return { router, pinia }
  },
  template: `
    <router-view />
  `
})

Single-SPA集成方案：

// main.js - 主应用
import { registerApplication, start } from 'single-spa'

// 注册微应用
registerApplication({
  name: 'user-app',
  app: () => import('./microfrontends/user-app/main.js'),
  activeWhen: location => location.pathname.startsWith('/user'),
  customProps: {
    domElement: document.getElementById('user-app-container'),
    authToken: getAuthToken()
  }
})

registerApplication({
  name: 'product-app',
  app: () => import('./microfrontends/product-app/main.js'), 
  activeWhen: location => location.pathname.startsWith('/product')
})

start()

// 用户应用适配器
import { createApp } from 'vue'
import singleSpaVue from 'single-spa-vue'

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render() {
      return h(App, {
        mountParcel: this.mountParcel,
        singleSpa: this.singleSpa
      })
    }
  },
  handleInstance(app, info) {
    app.use(router)
    app.use(pinia)
    
    // 接收主应用传递的props
    app.config.globalProperties.$customProps = info.customProps
  }
})

export const { bootstrap, mount, unmount } = vueLifecycles

应用间通信方案：

// 全局事件总线
class MicroEventBus {
  private events: Map<string, Function[]> = new Map()
  
  emit(event: string, data: any) {
    const handlers = this.events.get(event) || []
    handlers.forEach(handler => handler(data))
  }
  
  on(event: string, handler: Function) {
    const handlers = this.events.get(event) || []
    handlers.push(handler)
    this.events.set(event, handlers)
  }
  
  off(event: string, handler: Function) {
    const handlers = this.events.get(event) || []
    const index = handlers.indexOf(handler)
    if (index > -1) {
      handlers.splice(index, 1)
    }
  }
}

window.__MICRO_EVENT_BUS__ = new MicroEventBus()

// 应用中使用
export function useMicroEventBus() {
  const eventBus = window.__MICRO_EVENT_BUS__
  
  const emit = (event: string, data: any) => {
    eventBus.emit(event, data)
  }
  
  const on = (event: string, handler: Function) => {
    eventBus.on(event, handler)
    
    // 自动清理
    onUnmounted(() => {
      eventBus.off(event, handler)
    })
  }
  
  return { emit, on }
}

样式隔离解决方案：

// CSS-in-JS隔离
import { createNamespace } from '@/utils/style-namespace'

export default defineComponent({
  setup() {
    const namespace = createNamespace('user-app')
    
    return { namespace }
  }
})

// 运行时样式隔离
function createStyleScope(appName: string) {
  const scopeId = `data-${appName}-${Math.random().toString(36).substr(2, 9)}`
  
  // 为所有元素添加作用域属性
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            (node as Element).setAttribute(scopeId, '')
          }
        })
      }
    })
  })
  
  return { scopeId, observer }
}

主要技术挑战：

1. 应用隔离：JavaScript沙箱、CSS样式隔离、DOM隔离
2. 状态管理：跨应用状态共享、状态同步机制
3. 路由协调：主应用路由与子应用路由的协调
4. 资源加载：动态导入、依赖去重、版本管理
5. 通信机制：应用间数据传递、事件通知
6. 性能优化：Bundle大小控制、懒加载策略
7. 开发体验：本地开发环境、调试工具

What are the common causes of memory leaks in Vue 3? How to perform performance analysis and optimization?

考察点：内存管理优化。

答案：

Vue 3内存泄漏主要由未清理的事件监听器、定时器、DOM引用、闭包引用和第三方库集成问题引起。通过合理的组件清理、性能监控工具和代码审查可以有效预防和解决内存泄漏问题。

常见内存泄漏原因：

1. 未清理的事件监听器：

// ❌ 错误示例 - 忘记清理事件监听器
export default {
  setup() {
    const handleResize = () => {
      // 处理窗口大小变化
    }
    
    onMounted(() => {
      window.addEventListener('resize', handleResize)
      // 忘记在unmounted中移除监听器
    })
  }
}

// ✅ 正确示例 - 自动清理事件监听器
export default {
  setup() {
    const handleResize = () => {
      // 处理窗口大小变化
    }
    
    onMounted(() => {
      window.addEventListener('resize', handleResize)
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })
  }
}

2. 未清理的定时器：

// ❌ 错误示例
export default {
  setup() {
    let timer: NodeJS.Timeout
    
    onMounted(() => {
      timer = setInterval(() => {
        // 定时任务
      }, 1000)
      // 组件卸载时定时器仍在运行
    })
  }
}

// ✅ 正确示例  
export default {
  setup() {
    let timer: NodeJS.Timeout | null = null
    
    onMounted(() => {
      timer = setInterval(() => {
        // 定时任务
      }, 1000)
    })
    
    onUnmounted(() => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    })
  }
}

3. DOM引用未释放：

// ❌ 错误示例 - 持有DOM引用
export default {
  setup() {
    const elementRef = ref<HTMLElement>()
    const cachedElements = new Map()
    
    const cacheElement = (id: string) => {
      const el = document.getElementById(id)
      cachedElements.set(id, el) // 可能导致DOM节点无法被GC
    }
    
    return { elementRef, cacheElement }
  }
}

// ✅ 正确示例 - 使用WeakMap
export default {
  setup() {
    const cachedElements = new WeakMap() // 弱引用，允许GC
    
    const cacheElement = (id: string, element: HTMLElement) => {
      cachedElements.set(element, { id, timestamp: Date.now() })
    }
    
    onUnmounted(() => {
      // WeakMap会自动清理
    })
    
    return { cacheElement }
  }
}

性能监控和分析工具：

1. 自定义性能监控hook：

export function usePerformanceMonitor(componentName: string) {
  const startTime = performance.now()
  const memoryStart = (performance as any).memory?.usedJSHeapSize || 0
  
  onMounted(() => {
    const mountTime = performance.now() - startTime
    console.log(`${componentName} mounted in ${mountTime.toFixed(2)}ms`)
  })
  
  onUnmounted(() => {
    const memoryEnd = (performance as any).memory?.usedJSHeapSize || 0
    const memoryDiff = memoryEnd - memoryStart
    
    if (memoryDiff > 1024 * 1024) { // 超过1MB
      console.warn(`${componentName} may have memory leak: +${(memoryDiff / 1024 / 1024).toFixed(2)}MB`)
    }
  })
}

2. 内存泄漏检测工具：

class MemoryLeakDetector {
  private componentInstances = new WeakSet()
  private timers = new Set()
  private eventListeners = new Map()
  
  trackComponent(instance: ComponentInternalInstance) {
    this.componentInstances.add(instance)
  }
  
  trackTimer(id: number | NodeJS.Timeout) {
    this.timers.add(id)
  }
  
  trackEventListener(target: EventTarget, event: string, handler: Function) {
    const key = `${target.constructor.name}-${event}`
    if (!this.eventListeners.has(key)) {
      this.eventListeners.set(key, new Set())
    }
    this.eventListeners.get(key)!.add(handler)
  }
  
  checkLeaks() {
    console.log('Active timers:', this.timers.size)
    console.log('Event listeners:', Array.from(this.eventListeners.entries()))
    
    // 强制GC并检查内存使用
    if (window.gc) {
      window.gc()
      const memory = (performance as any).memory
      if (memory) {
        console.log('Memory usage:', {
          used: (memory.usedJSHeapSize / 1024 / 1024).toFixed(2) + 'MB',
          total: (memory.totalJSHeapSize / 1024 / 1024).toFixed(2) + 'MB',
          limit: (memory.jsHeapSizeLimit / 1024 / 1024).toFixed(2) + 'MB'
        })
      }
    }
  }
}

优化策略和最佳实践：

1. 自动清理组合函数：

export function useEventListener(
  target: EventTarget,
  event: string,
  handler: EventListener,
  options?: AddEventListenerOptions
) {
  onMounted(() => {
    target.addEventListener(event, handler, options)
  })
  
  onUnmounted(() => {
    target.removeEventListener(event, handler, options)
  })
}

export function useInterval(callback: Function, delay: number) {
  let timer: NodeJS.Timeout | null = null
  
  const start = () => {
    if (!timer) {
      timer = setInterval(callback, delay)
    }
  }
  
  const stop = () => {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
  
  onUnmounted(stop)
  
  return { start, stop }
}

2. 内存优化配置：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router'],
          'utils': ['lodash', 'axios']
        }
      }
    }
  },
  
  // 开启gzip减少传输大小
  plugins: [
    compression({ algorithm: 'gzip' })
  ]
}

How to extend Vue 3’s compiler? What is the development principle of custom transformation plugins?

考察点：编译器扩展。

答案：

Vue 3编译器基于AST（抽象语法树）转换架构，支持通过插件系统扩展编译行为。开发者可以创建自定义转换插件来实现特殊语法支持、性能优化、代码生成等功能。

编译器转换流程：

// Vue编译器转换管道
Source Code → Parse (AST) → Transform (Modified AST) → Generate (Code)

// 编译器插件注册
const { compile } = require('@vue/compiler-core')

const customTransform = (node, context) => {
  // 自定义转换逻辑
}

const result = compile(template, {
  nodeTransforms: [customTransform],
  directiveTransforms: {
    myDirective: transformMyDirective
  }
})

自定义指令转换：

// 自定义v-clickoutside指令转换
function transformClickOutside(dir, node, context) {
  const { exp } = dir
  
  return {
    props: [
      {
        key: 'onClickOutside',
        value: exp || 'undefined'
      }
    ],
    needRuntime: true // 需要运行时支持
  }
}

// 注册指令转换器
const compilerOptions = {
  directiveTransforms: {
    'click-outside': transformClickOutside
  }
}

// 运行时指令实现
const vClickOutside = {
  mounted(el, binding) {
    const handler = (event) => {
      if (!el.contains(event.target)) {
        binding.value && binding.value(event)
      }
    }
    
    document.addEventListener('click', handler)
    el._clickOutsideHandler = handler
  },
  
  unmounted(el) {
    document.removeEventListener('click', el._clickOutsideHandler)
    delete el._clickOutsideHandler
  }
}

节点转换插件开发：

// 自动导入组件转换插件
function createAutoImportTransform(components) {
  return (node, context) => {
    if (node.type === NodeTypes.ELEMENT && 
        components.includes(node.tag)) {
      
      // 添加导入语句到模块头部
      const importStatement = `import ${node.tag} from '@/components/${node.tag}.vue'`
      context.imports.add(importStatement)
      
      // 修改节点，添加组件注册
      node.codegenNode = {
        ...node.codegenNode,
        isComponent: true
      }
    }
    
    return node
  }
}

// 使用自定义转换
const autoImportTransform = createAutoImportTransform([
  'CustomButton',
  'CustomInput',
  'CustomModal'
])

编译时宏扩展：

// 自定义编译时宏 - defineModel增强版
function transformDefineModel(node, context) {
  if (node.type === NodeTypes.SIMPLE_EXPRESSION &&
      node.content === 'defineModel') {
    
    // 解析参数
    const args = parseCallExpression(node.parent)
    const [propName, options] = args
    
    // 生成props和emits
    const propsCode = `
      const ${propName} = computed({
        get: () => props.${propName},
        set: (value) => emit('update:${propName}', value)
      })
    `
    
    // 添加到setup代码中
    context.setupCode.push(propsCode)
    
    // 自动添加props和emits定义
    context.props.add(propName)
    context.emits.add(`update:${propName}`)
  }
}

Vite插件集成：

// vite-plugin-vue-transform.js
export default function vueTransformPlugin(options = {}) {
  return {
    name: 'vue-transform',
    transform(code, id) {
      if (id.endsWith('.vue')) {
        // 应用自定义转换
        const { compileTemplate } = require('@vue/compiler-sfc')
        
        const result = compileTemplate({
          source: code,
          compilerOptions: {
            nodeTransforms: [
              createAutoImportTransform(options.autoImport || []),
              transformDefineModel
            ],
            directiveTransforms: {
              'click-outside': transformClickOutside
            }
          }
        })
        
        return result.code
      }
    }
  }
}

// vite.config.js
import vueTransformPlugin from './plugins/vue-transform'

export default {
  plugins: [
    vue(),
    vueTransformPlugin({
      autoImport: ['CustomButton', 'CustomInput']
    })
  ]
}

AST节点操作工具：

// AST遍历和修改工具
class ASTVisitor {
  visit(node, visitors) {
    const visitor = visitors[node.type]
    if (visitor) {
      const result = visitor(node)
      if (result !== undefined) {
        return result
      }
    }
    
    // 递归访问子节点
    this.visitChildren(node, visitors)
    return node
  }
  
  visitChildren(node, visitors) {
    switch (node.type) {
      case NodeTypes.ELEMENT:
        node.children = node.children.map(child => 
          this.visit(child, visitors)
        )
        break
      case NodeTypes.IF:
        node.branches.forEach(branch => {
          branch.children = branch.children.map(child =>
            this.visit(child, visitors)
          )
        })
        break
    }
  }
}

// 使用示例
const visitor = new ASTVisitor()
const transformedAST = visitor.visit(ast, {
  [NodeTypes.ELEMENT]: (node) => {
    if (node.tag === 'img' && !node.props.find(p => p.name === 'loading')) {
      // 自动添加loading="lazy"属性
      node.props.push({
        type: NodeTypes.ATTRIBUTE,
        name: 'loading',
        value: { content: 'lazy' }
      })
    }
  }
})

编译器插件应用场景：

• 自定义语法糖支持
• 性能优化转换
• 代码检查和lint
• 自动化重构工具
• 框架特定功能集成

What is the mechanism of effectScope? How to use it to manage the lifecycle of side effects?

考察点：副作用作用域。

答案：

effectScope是Vue 3.2+引入的API，用于创建独立的响应式作用域来管理副作用的生命周期。它允许开发者精确控制effect、computed、watch等响应式API的创建和销毁，特别适用于插件开发和复杂组合函数场景。

基本使用和原理：

import { effectScope, ref, computed, watch } from 'vue'

// 创建独立的作用域
const scope = effectScope()

scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  
  // 在作用域内创建的所有副作用会被自动收集
  watch(count, (newVal) => {
    console.log('count changed:', newVal)
  })
  
  // 返回需要暴露的数据和方法
  return {
    count,
    doubled,
    increment: () => count.value++
  }
})

// 停止整个作用域，自动清理所有副作用
scope.stop()

复杂组合函数中的应用：

// 可复用的数据获取hook
export function useAsyncData(url, options = {}) {
  // 创建独立作用域避免副作用泄漏
  const scope = effectScope()
  
  return scope.run(() => {
    const data = ref(null)
    const loading = ref(false)
    const error = ref(null)
    
    // 响应式依赖
    const computedUrl = computed(() => {
      return typeof url === 'function' ? url() : url
    })
    
    // 自动重新请求
    const stopWatcher = watch(
      computedUrl,
      async (newUrl) => {
        if (!newUrl) return
        
        try {
          loading.value = true
          error.value = null
          data.value = await fetch(newUrl).then(r => r.json())
        } catch (err) {
          error.value = err
        } finally {
          loading.value = false
        }
      },
      { immediate: true }
    )
    
    // 手动清理函数
    const cleanup = () => {
      scope.stop() // 清理所有副作用
    }
    
    // 组件卸载时自动清理
    if (getCurrentInstance()) {
      onScopeDispose(cleanup)
    }
    
    return {
      data: readonly(data),
      loading: readonly(loading),
      error: readonly(error),
      cleanup
    }
  })
}

嵌套作用域管理：

// 插件系统中的作用域管理
class PluginManager {
  private plugins = new Map()
  private globalScope = effectScope()
  
  install(name: string, plugin: Plugin) {
    // 为每个插件创建独立作用域
    const pluginScope = effectScope()
    
    this.plugins.set(name, {
      scope: pluginScope,
      instance: pluginScope.run(() => {
        // 插件初始化逻辑在独立作用域中执行
        return plugin.setup(this.createPluginContext())
      })
    })
  }
  
  uninstall(name: string) {
    const plugin = this.plugins.get(name)
    if (plugin) {
      // 停止插件作用域，自动清理所有副作用
      plugin.scope.stop()
      this.plugins.delete(name)
    }
  }
  
  destroy() {
    // 清理所有插件
    this.plugins.forEach(plugin => plugin.scope.stop())
    this.plugins.clear()
    
    // 清理全局作用域
    this.globalScope.stop()
  }
}

作用域传递和继承：

// 父子作用域关系
export function createNestedScope() {
  const parentScope = effectScope()
  
  return parentScope.run(() => {
    const parentState = ref('parent')
    
    // 创建子作用域
    const childScope = effectScope()
    
    const childData = childScope.run(() => {
      const childState = ref('child')
      
      // 子作用域可以访问父作用域的数据
      const combined = computed(() => 
        `${parentState.value}-${childState.value}`
      )
      
      return { childState, combined }
    })
    
    return {
      parentState,
      childData,
      stopChild: () => childScope.stop(),
      stopAll: () => parentScope.stop()
    }
  })
}

与组件生命周期集成：

// 组件内使用effectScope
export default {
  setup() {
    const componentScope = effectScope()
    
    // 在组件作用域内管理副作用
    const { data, cleanup } = componentScope.run(() => {
      return useComplexFeature()
    })
    
    // 组件卸载时清理
    onUnmounted(() => {
      componentScope.stop()
    })
    
    return { data }
  }
}

// 全局状态管理中的应用
class GlobalStateManager {
  private scope = effectScope(true) // detached scope
  
  createGlobalState() {
    return this.scope.run(() => {
      const state = reactive({
        user: null,
        theme: 'light'
      })
      
      // 持久化监听
      watch(
        () => state.theme,
        (theme) => localStorage.setItem('theme', theme),
        { immediate: true }
      )
      
      return state
    })
  }
}

How to establish Vue 3 code standards and best practices in team collaboration?

考察点：团队规范制定。

答案：

Vue 3团队代码规范需要从项目结构、编码风格、组件设计、性能优化等多个维度制定统一标准，并通过工具链自动化执行，确保代码质量和团队协作效率。

项目结构规范：

src/
├── api/                    # API接口层
│   ├── modules/           # 按业务模块分组
│   └── types/             # 接口类型定义
├── assets/                # 静态资源
├── components/            # 组件库
│   ├── base/             # 基础UI组件 (BaseButton, BaseInput)
│   ├── business/         # 业务组件 (UserCard, ProductList)  
│   └── layout/           # 布局组件 (Header, Sidebar)
├── composables/          # 组合函数 (use开头)
├── constants/            # 常量定义
├── directives/           # 自定义指令
├── router/               # 路由配置
├── stores/               # 状态管理
├── styles/               # 样式文件
├── types/                # 全局类型定义
├── utils/                # 工具函数
└── views/                # 页面组件

组件编码规范：

<!-- 标准组件模板 -->
<script setup lang="ts">
/**
 * 用户信息卡片组件
 * @author 张三
 * @since 2024-01-01
 */

// 1. 导入顺序：Vue API -> 第三方库 -> 内部模块
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { userAPI } from '@/api/modules/user'
import type { User } from '@/types/user'

// 2. Props定义 - 使用接口约束
interface Props {
  /** 用户ID */
  userId: number
  /** 显示模式 */
  mode?: 'simple' | 'detailed'
  /** 是否显示操作按钮 */
  showActions?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'simple',
  showActions: true
})

// 3. Emits定义 - 明确事件签名
interface Emits {
  /** 用户点击事件 */
  (e: 'click', user: User): void
  /** 编辑用户事件 */
  (e: 'edit', userId: number): void
}

const emit = defineEmits<Emits>()

// 4. 响应式状态
const user = ref<User | null>(null)
const loading = ref(false)

// 5. 计算属性
const displayName = computed(() => {
  return user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
})

const isDetailMode = computed(() => props.mode === 'detailed')

// 6. 方法定义
const fetchUser = async () => {
  try {
    loading.value = true
    user.value = await userAPI.getById(props.userId)
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

const handleUserClick = () => {
  if (user.value) {
    emit('click', user.value)
  }
}

// 7. 生命周期
onMounted(() => {
  fetchUser()
})

// 8. 暴露给父组件的方法
defineExpose({
  refresh: fetchUser,
  user: readonly(user)
})
</script>

<template>
  <!-- 模板结构清晰，使用语义化标签 -->
  <article 
    class="user-card" 
    :class="{ 'user-card--detailed': isDetailMode }"
    @click="handleUserClick"
  >
    <div v-if="loading" class="user-card__loading">
      <LoadingSpinner />
    </div>
    
    <div v-else-if="user" class="user-card__content">
      <header class="user-card__header">
        <Avatar :src="user.avatar" :alt="displayName" />
        <h3 class="user-card__name">{{ displayName }}</h3>
      </header>
      
      <div v-if="isDetailMode" class="user-card__details">
        <p class="user-card__email">{{ user.email }}</p>
        <p class="user-card__role">{{ user.role }}</p>
      </div>
      
      <footer v-if="showActions" class="user-card__actions">
        <BaseButton 
          size="small" 
          @click.stop="emit('edit', user.id)"
        >
          编辑
        </BaseButton>
      </footer>
    </div>
    
    <div v-else class="user-card__empty">
      <p>用户不存在</p>
    </div>
  </article>
</template>

<style scoped>
/* 使用BEM命名规范 */
.user-card {
  --user-card-padding: 16px;
  --user-card-border-radius: 8px;
  
  padding: var(--user-card-padding);
  border-radius: var(--user-card-border-radius);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-card--detailed {
  min-height: 200px;
}

.user-card__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.user-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.user-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.user-card__details {
  margin-bottom: 12px;
  color: var(--text-color-secondary);
}

.user-card__actions {
  display: flex;
  justify-content: flex-end;
}
</style>

TypeScript规范：

// types/user.ts - 类型定义规范
export interface User {
  /** 用户唯一标识 */
  id: number
  /** 用户名 */
  username: string
  /** 邮箱地址 */
  email: string
  /** 用户角色 */
  role: UserRole
  /** 创建时间 */
  createdAt: string
  /** 更新时间 */  
  updatedAt: string
}

export type UserRole = 'admin' | 'user' | 'guest'

export interface CreateUserRequest {
  username: string
  email: string
  password: string
  role?: UserRole
}

export interface UpdateUserRequest extends Partial<Omit<User, 'id' | 'createdAt' | 'updatedAt'>> {}

// API接口规范
export interface ApiResponse<T = any> {
  code: number
  message: string
  data: T
}

export interface PaginationParams {
  page: number
  pageSize: number
}

export interface PaginationResponse<T> {
  items: T[]
  total: number
  page: number
  pageSize: number
}

工具链配置：

// .eslintrc.js
module.exports = {
  extends: [
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier'
  ],
  rules: {
    // Vue规则
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/component-definition-name-casing': ['error', 'PascalCase'],
    'vue/prop-name-casing': ['error', 'camelCase'],
    'vue/custom-event-name-casing': ['error', 'camelCase'],
    
    // TypeScript规则
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn',
    
    // 通用规则
    'prefer-const': 'error',
    'no-var': 'error',
    'object-shorthand': 'error'
  }
}

// prettier.config.js
module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'es5',
  tabWidth: 2,
  useTabs: false,
  printWidth: 80,
  bracketSpacing: true,
  arrowParens: 'avoid'
}

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor', 
      'test', 'chore', 'perf', 'ci', 'build'
    ]],
    'scope-enum': [2, 'always', [
      'components', 'utils', 'api', 'types', 'styles'
    ]]
  }
}

代码审查清单：

• ✅ 组件职责单一，复用性好
• ✅ Props和Emits有完整类型定义
• ✅ 使用组合式API，逻辑清晰
• ✅ 样式使用CSS变量，支持主题
• ✅ 无控制台错误和警告
• ✅ 单元测试覆盖率 > 80%
• ✅ 性能敏感组件有优化措施
• ✅ 无障碍性支持（aria属性）

What is the integration solution between Vue 3 and Web Components? How to achieve cross-framework component reuse?

考察点：Web标准集成。

答案：

Vue 3与Web Components的集成通过defineCustomElement API实现，可以将Vue组件编译为原生自定义元素，实现真正的跨框架复用。这种方案结合了Vue的开发体验和Web Components的标准化优势。

Vue组件转Web Component：

<!-- MyButton.vue -->
<script setup lang="ts">
interface Props {
  variant?: 'primary' | 'secondary'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary'
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const handleClick = (event: MouseEvent) => {
  emit('click', event)
}
</script>

<template>
  <button 
    :class="['my-button', `my-button--${variant}`]"
    :disabled="disabled"
    @click="handleClick"
  >
    <slot />
  </button>
</template>

<style scoped>
.my-button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.my-button--primary {
  background: #007bff;
  color: white;
}

.my-button--secondary {
  background: #6c757d;
  color: white;
}

.my-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

Web Component注册和使用：

// web-components.js
import { defineCustomElement } from 'vue'
import MyButton from './components/MyButton.vue'
import MyInput from './components/MyInput.vue'
import MyModal from './components/MyModal.vue'

// 转换为Web Components
const MyButtonElement = defineCustomElement(MyButton)
const MyInputElement = defineCustomElement(MyInput) 
const MyModalElement = defineCustomElement(MyModal)

// 注册自定义元素
customElements.define('my-button', MyButtonElement)
customElements.define('my-input', MyInputElement)
customElements.define('my-modal', MyModalElement)

// 在任何框架中使用
// HTML中直接使用
/*
<my-button variant="primary" @click="handleClick">
  Click me
</my-button>
*/

// React中使用
/*
function App() {
  return (
    <div>
      <my-button variant="primary" onClick={handleClick}>
        React中的Vue组件
      </my-button>
    </div>
  )
}
*/

复杂组件的Web Component封装：

// 表单组件封装
import { defineCustomElement, ref, reactive } from 'vue'

const MyFormElement = defineCustomElement({
  props: {
    schema: { type: Object, required: true },
    modelValue: { type: Object, default: () => ({}) }
  },
  
  emits: ['update:modelValue', 'submit', 'validate'],
  
  setup(props, { emit }) {
    const formData = reactive({ ...props.modelValue })
    const errors = ref({})
    
    // 监听外部数据变化
    watch(() => props.modelValue, (newVal) => {
      Object.assign(formData, newVal)
    }, { deep: true })
    
    // 数据变化时通知外部
    watch(formData, (newData) => {
      emit('update:modelValue', { ...newData })
    }, { deep: true })
    
    const validate = async () => {
      const validation = await validateForm(formData, props.schema)
      errors.value = validation.errors
      emit('validate', validation)
      return validation.isValid
    }
    
    const handleSubmit = async () => {
      const isValid = await validate()
      if (isValid) {
        emit('submit', formData)
      }
    }
    
    // 暴露方法给外部调用
    defineExpose({
      validate,
      reset: () => {
        Object.keys(formData).forEach(key => {
          formData[key] = undefined
        })
      }
    })
    
    return {
      formData,
      errors,
      validate,
      handleSubmit
    }
  },
  
  template: `
    <form @submit.prevent="handleSubmit">
      <div v-for="field in schema.fields" :key="field.name">
        <label :for="field.name">{{ field.label }}</label>
        <input 
          :id="field.name"
          :type="field.type"
          v-model="formData[field.name]"
          :class="{ error: errors[field.name] }"
        />
        <span v-if="errors[field.name]" class="error-message">
          {{ errors[field.name] }}
        </span>
      </div>
      <button type="submit">提交</button>
    </form>
  `
})

customElements.define('my-form', MyFormElement)

构建配置优化：

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: 'src/web-components.js',
      name: 'MyComponents',
      fileName: 'my-components'
    },
    rollupOptions: {
      // 确保Vue被正确打包
      external: [],
      output: {
        // 全局变量映射
        globals: {}
      }
    }
  },
  
  define: {
    // 为Web Components环境配置
    __VUE_OPTIONS_API__: false,
    __VUE_PROD_DEVTOOLS__: false
  },
  
  plugins: [
    vue({
      // 自定义元素模式配置
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('my-')
        }
      }
    })
  ]
})

跨框架组件库架构：

// 组件库入口
export class ComponentLibrary {
  private registered = new Set()
  
  // 批量注册组件
  registerAll() {
    const components = [
      { name: 'my-button', component: MyButtonElement },
      { name: 'my-input', component: MyInputElement },
      { name: 'my-form', component: MyFormElement }
    ]
    
    components.forEach(({ name, component }) => {
      if (!this.registered.has(name)) {
        customElements.define(name, component)
        this.registered.add(name)
      }
    })
  }
  
  // 按需注册
  register(name: string, component: any) {
    if (!this.registered.has(name)) {
      customElements.define(name, component)
      this.registered.add(name)
    }
  }
  
  // 检查浏览器支持
  isSupported() {
    return 'customElements' in window && 'shadowRoot' in Element.prototype
  }
}

// 使用方式
const componentLib = new ComponentLibrary()

// 检查支持性
if (componentLib.isSupported()) {
  componentLib.registerAll()
} else {
  console.warn('Web Components not supported')
}

优势和注意事项：

优势：

• 真正的跨框架复用
• 标准化的Web API
• 良好的封装性和隔离性
• 可以在任何HTML环境中使用

注意事项：

• 包体积相对较大（包含Vue运行时）
• 某些Vue特性在Web Components中受限
• 浏览器兼容性需要polyfill
• 调试相对复杂

最佳实践：

• 适用于设计系统和组件库
• 简单组件优先考虑原生实现
• 复杂交互组件使用Vue转换
• 提供完善的TypeScript类型支持