参考回复：

• 核心包比 Vue 2 更小，更好的 tree-shaking 支持，全面支持 TypeScript
• setup 函数：在组件生命周期初始化时运行，用于定义响应式状态、计算属性和方法。
• 基于 Proxy 的新响应式系统，可以代理整个对象而不是已有属性；更好的支持数组和其他复杂数据类型；可以避免大量递归操作，性能更高
• 更好的 Hooks 逻辑复用

参考回复：

• 父子组件通信 ( props、emits )
• 跨层级通信 祖先组件和后代组件通信 ( provide 和 inject )
• 灵活通信 ( Mitt 事件总线、Pinia状态管理库 )

参考回复：

• 通过 ref 获取组件实例
• 使用 useTemplateRefs 自定义名称

参考回复：

• ref 更全面，不仅可用于基本数据类型还可用于引用数据类型。使用时需要通过 .value 访问
• reactive 用于定义复杂的响应式对象（通常是对象或数组）。默认对对象的所有属性进行深度响应式处理。

建议使用 ref() 作为声明响应式状态的主要 API

参考回复：

• 可以使用 Vue 3 提供的一个工具函数：toRefs

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
});
const { count, message } = toRefs(state);

参考回复：

• 后端开启 CORS 允许跨域
• 使用 vite.config.js 配置代理；最常用

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
}

参考回复：

• 内置特殊元素 “元组件” <component>

<template>
  <component :is="view" />
</template>

参考回复：

参考回复：

• 3.3+ 中支持的 defineOptions()
• 使用插件 unplugin-vue-setup-extend-plus

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

参考回复：

首先定义 ref 获取组件使用

然后在子组件使用 defineExpose() 暴露

参考回复：

• 允许子组件将数据或方法暴露给父组件，并在父组件中动态生成内容

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

参考回复：

• 可以通过 <Transition> 和 <TransitionGroup> 组件来实现组件间的过渡动画。

参考回复：

• 使用 :deep()

参考回复：

• 通过配置

watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true, immediate: true }
)

参考回复：

• 主要用于 缓存组件的状态 和 避免组件被频繁销毁与重建，以优化性能。

大概原理:

• keep-alive 会在内部维护一个缓存对象（cache），通过组件的 name 或 key 作为标识。
• 当组件被切换为不活动状态时，其实例会存入 cache，而不是销毁。

参考回复：

• 通过 directives 选项注册

app.directive('focus', {
  mounted(el) {
    el.focus(); // 自动聚焦
  },
});

参考回复：

• Teleport 允许你将组件的 DOM 渲染到组件树之外的任意位置。它解决了 Vue 组件的 DOM 层级嵌套限制问题，使得你可以将模态框、通知、工具提示等内容渲染到 HTML 文档的任意位置。

<template>
  <div>
    <h1>主内容</h1>
    <teleport to="body">
      <div class="modal">这是一个模态框</div>
    </teleport>
  </div>
</template>

参考回复：

• 用于处理 异步组件的加载过程。它允许你在异步任务（如数据加载或异步组件的解析）完成之前，显示一个占位内容（fallback），从而提升用户体验。

<template>
  <div>
    <h1>Suspense 示例</h1>
    <Suspense>
      <!-- 默认插槽：加载完成后显示的内容 -->
      <template #default>
        <AsyncComponent />
      </template>

      <!-- 占位插槽：加载期间显示的内容 -->
      <template #fallback>
        <p>加载中...</p>
      </template>
    </Suspense>
  </div>
</template>

参考回复： Pinia相比 Vuex

• 更符合 Composition API 思维模式
• 更好的 TypeScript 类型支持

参考回复：

• 路由懒加载是一种按需加载路由对应组件的方式，可以显著优化首屏加载时间，提高应用性能。它是通过动态导入（import()）的方式实现的。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 动态导入 Home 组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // 动态导入 About 组件
  },
];

参考回复：

• 可以使用 .env 文件来为不同环境配置变量。常见的环境文件包括：
  • env：默认的环境配置（用于开发环境或没有明确环境时）。
  • .env.development：开发环境配置。
  • .env.production：生产环境配置。
  • .env.test：测试环境配置。

参考回复：

• 父组件 beforeCreate → 子组件 beforeCreate → 子组件 created → 父组件 created → 子组件 beforeMount → 父组件 beforeMount → 子组件 mounted → 父组件 mounted

参考回复：

• 组件懒加载
• 组件内缓存和 keep-alive
• 合理使用 computed 和 watch 减少不必要的渲染和计算
• 使用 v-memo 来缓存渲染结果
• 事件防抖与节流
• 压缩与优化资源
• ...

参考回复：

• 前端捕获 401 错误并跳转到登录页
• 前端检测 Token 的过期时间 (exp)判断

参考回复：

• Axios 请求、响应拦截器中处理接口权限验证和错误处理
• 全局错误处理（Vue.config.errorHandler）