前端vue3相关知识点

一、 composition api 和options api的区别，为什么推荐使用composition api？
1. 逻辑组织方式不同： Options API 是按选项类型组织代码（data、methods、computed、watch 分开写，一个功能会散落在多个地方），Composition API 是按业务逻辑组织代码（可以将相关逻辑写在一起，不像options api会被切割）；
2. 复用方式不同：composition api复用就是调用函数，没有冲突，不会存在options api的mixins命名冲突，来源不明，不好追溯等问题
3. 可维护性不同： Options API会随着项目和组件变大，被拆散在不同选项里，相关逻辑分散，增加了阅读和维护成本。Composition API可以将相关逻辑写在一个 setup 函数里，逻辑更清晰，可维护性更高；

二、pinia的核心特性是什么，对比vuex的有什么优势？

1.Pinia 的核心特性

　　模块化和轻量化： 

• 每个 store 是独立的模块，不需要像 Vuex 那样要写 modules。
• 配置简单，体积小，学习成本低。

　　支持 Composition API：

• 与 Vue 3 完美集成，store 可以直接在 setup() 中使用。

　　类型推导友好（TypeScript 支持）：

• 能够自动推导 state、getters、actions 类型，减少手动定义类型的麻烦

　　支持可热重载：

• 开发时修改 store 能即时生效，不需要刷新整个应用。

2. 与 Vuex 对比的优势

• pinia的每个 store 独立，直接导入使用即可，vuex需要写 modules，配置复杂。
• pinia能够自动推导 类型（ state、getters、actions），vuex类型推导麻烦，需要额外封装。
• pinia无需 mutations，直接用 actions 改 state。
• pinia完全支持 Composition API，与 Vue 3 生态自然融合。

3. Vue3+TS中使用：

① 安装Pinia并创建实例，挂载到Vue应用；

② 定义store，通过defineStore指定泛型，实现类型约束；

```typescript

示例（财务系统用户状态）：

import { defineStore } from 'pinia';

interface UserState { token: string; role: 'admin' | 'finance' | 'normal'; }

export const useUserStore = defineStore('user',{  

  state: (): UserState => ({ token: '', role: 'normal' }),

  actions: {

    setToken(token: string){ this.token = token; },  

    setRole(role: UserState['role']) { this.role = role; }  

  }

});

组件中使用：

import { useUserStore } from '@/store';

const userStore = useUserStore(); userStore.setToken('xxx');

 

三、Vue3响应式原理（Proxy），与Vue2的Object.defineProperty的区别，如何解决Proxy的局限性？

响应式原理：

• 核心是通过拦截对象的get、set、deleteProperty 等，进行依赖收集，当访问对象的属性时，会将当前执行的副作用函数（Effect）与属性建立依赖关系。
• 当数据发生变化时，vue会找到依赖该属性的副作用函数并重新执行，从而触发视图更新。

与Object.defineProperty的区别：

• proxy拦截的是整个对象，而object.defineProperty拦截的是属性
• object.defineProperty初始化时必须遍历 所有属性，性能消耗大，proxy采用的是懒代理方式，访问到某一层时才代理。
• proxy可以监听带对象的新增或删除，object.defineProperty不能监听到对象的新增或删除。
• proxy可以监听数组索引和长度变化，object.defineProperty不能监听到数组变化。
• proxy对ts开发友好，object.defineProperty类型推导困难，需要额外封装。

如何解决Proxy的局限性：
1.无法监听非对象类型的变化：使用ref来解决即可

2.深层嵌套对象的懒代理问题：对特定深层对象单独调用 reactive()

3.Proxy 不能直接像对象那样监听普通属性变化：使用vue3内置的方法 set, add, delete来触发更新

4.响应式对象被解构赋值，导致对象失去响应式：使用vue3内置方法 toRefs()。

 

四、TypeScript的泛型使用场景

• 函数复用： 允许函数在不同类型间复用，同时保持类型安全。
• 接口和类型复用： 泛型接口或类型可以描述可复用的结构化数据。
• 约束泛型： 类在实例化时可指定不同类型，增加灵活性。
• 类的泛型： 限制泛型类型，保证操作安全。

五、Vue3中defineProps、defineEmits的类型定义方法，如何实现组件的类型约束？

1. 直接使用接口/类型

<script setup lang="ts">
interface Props {
title: string;
count?: number; // 可选
}

const props = defineProps<Props>();

// 使用时 TS 会提示类型
console.log(props.title);
console.log(props.count);
</script>

2. 内联类型定义

<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
}>();
</script>

 

六、Vite和Webpack的核心区别，为什么大型项目中越来越多使用Vite？Vite的配置优化方法？

Vite和Webpack的核心区别：

• Webpack 的构建理念是「打包构建」，Vite 则是「按需编译」。
• Webpack 会先打包所有模块生成 Bundle，再启动开发服务器，项目越大启动越慢；
• Vite 则利用浏览器原生 ES 模块支持，在开发时直接按需编译源文件，启动速度极快。
• Vite 开发更轻量，Webpack 生态成熟、功能全面，更适合复杂定制场景。

为什么大型项目中越来越多使用Vite：

• 因为vite它启动快、热更新快、配置简单、支持现代语法，大幅提升开发效率和维护体验，同时生产构建性能也足够优秀。

Vite的配置优化方法有那些：

• 优化依赖预构建
  • 对大型第三方库做预构建，减少开发模式启动时间和 HMR 延迟。
• 按需加载和代码拆分
  • 使用动态 import 或 Rollup 的 manualChunks 拆分代码，减少主 bundle 体积，提高首屏加载速度。
• 静态资源优化
  • 压缩图片、CSS 和 JS，去掉无用的 console 或 debug 代码，减小生产包体积。

• 多环境配置和缓存
  • 针对开发、测试、生产环境设置不同配置，同时利用缓存减少重复构建开销。
• 插件优化
  • 使用现代插件提高构建效率，比如组件按需引入、静态资源压缩、PWA 支持等。

七、前端首屏加载优化的具体方案？

• 代码分割
  • 按路由或模块拆分 JS，首屏只加载必要代码。
  • 动态 import() 或框架自带路由懒加载实现。
• 按需加载
  • 图片、组件、第三方库按需加载。
• 资源压缩和合并
  • JS/CSS 压缩、图片压缩、SVG 优化。
  • 减少请求体积，加快下载速度。
• HTTP/2 & CDN
  • 静态资源使用 CDN 分发，减少跨地域延迟。
  • HTTP/2 多路复用同时加载资源，提高并发效率。

• 服务端渲染（SSR）
  • 首屏由服务器渲染 HTML，用户看到内容更快。
• 接口优化
  • 减少首屏接口请求数量，将接口合并。
  • 请求使用缓存或静态生成数据。

• 浏览器缓存
• 服务端缓存（CDN + 缓存策略）