vue 知识点
Vue 基本原理
响应式系统：基于 Object.defineProperty 或 Proxy 实现数据劫持
虚拟 DOM：通过 diff 算法高效更新真实 DOM
组件化：将 UI 拆分为独立可复用的组件
模板编译：将模板转换为渲染函数
生命周期钩子：提供组件创建、更新和销毁过程中的回调函数
onMounted：组件挂载后
onUpdated：组件更新后
onUnmounted：组件卸载后
onBeforeMount/onBeforeUpdate/onBeforeUnmount：对应阶段前触发
onErrorCaptured：捕获子组件错误
Vue 常用知识点
指令系统：v-if/v-show、v-for、v-bind、v-on、v-model
组件通信：props/$emit、provide/inject、$parent/$children、Vuex
计算属性和侦听器：computed 和 watch 的使用场景
插槽：默认插槽、具名插槽、作用域插槽
过渡动画：transition 和 transition-group 组件
混入：mixins 的基本用法
自定义指令：全局和局部指令定义
ES6 常用点
变量声明：let 和 const 块级作用域
箭头函数：简洁语法和 this 绑定
模板字符串：支持多行和变量嵌入
解构赋值：数组和对象解构
扩展运算符：… 用于数组和对象
Promise：异步编程解决方案
Class：类语法糖
模块化：import/export
默认参数：函数参数默认值
Symbol：唯一标识符
Map/Set：新的数据结构
迭代器和生成器：for…of 和 function*
Vue 主流脚手架工具
Vue CLI
Vue CLI 是 Vue 官方提供的标准脚手架工具，适合构建完整的 Vue 项目，支持插件系统、图形化界面和丰富的配置选项。
核心功能：快速初始化项目、集成 Webpack/Babel/ESLint 等工具链。
适用场景：企业级应用、需要高度自定义配置的项目。
Vite
Vite 是新一代前端构建工具，由 Vue 作者尤雨溪开发，主打极速启动和热更新。
核心优势：基于原生 ES Modules，开发环境启动快，适合现代浏览器项目。
适用场景：快速原型开发、对构建速度敏感的项目。
Nuxt.js
Nuxt.js 是基于 Vue 的通用应用框架（SSR/静态站点生成），内置路由、状态管理等。
核心优势：一套代码多端部署，内置大量 UI 组件和工具。
适用场景：需要同时覆盖多端的项目（Web/iOS/Android/Electron）。
选择建议
快速开发轻量应用：优先考虑 Vite。
复杂企业级项目：Vue CLI 或 Nuxt.js（需 SSR）非集群项目不推荐，非常吃服务端性能。
桌面端开发
electron-vite 是一个专为 Electron 应用设计的构建工具，基于 Vite 的快速开发能力，为 Electron 的主进程（Main Process）、渲染进程（Renderer Process）和预加载脚本（Preload Script）提供开箱即用的支持。它简化了 Electron 项目的配置流程，并优化了开发和生产环境的构建效率。
开发桌面端项目： 利用 Vite 的快速启动和热更新能力，提升开发体验
Vue3 项目搭建与目录结构说明
- 环境准备
确保已安装 Node.js（建议 16.x 及以上版本）
安装 Vue CLI（如未安装）：npm install -g @vue/cli - 创建项目
vue create project-name或使用 Vite 创建：
npm create vite@latest project-name --template vue- 选择配置
手动选择特性
推荐选择：
Vue 3
TypeScript（可选）
Router
Vuex/Pinia（状态管理）
ESLint（代码规范） - 安装依赖
cd project-name
npm install- 启动项目
npm run serve # 或 npm run dev（Vite项目）项目文件结构
project-name/
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── index.html # 主HTML文件
├── src/ # 源代码目录
│ ├── assets/ # 静态资源（图片、字体等）
│ ├── components/ # 公用组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理（Vuex/Pinia）
│ ├── views/ # 页面级组件
│ ├── App.vue # 根组件
│ ├── main.js/ts # 项目入口文件
│ └── shims-vue.d.ts # TypeScript声明文件（如使用TS）
├── .gitignore # Git忽略配置
├── babel.config.js # Babel配置
├── package.json # 项目依赖配置
├── README.md # 项目说明文档
└── vue.config.js # Vue项目配置（可选）关键文件说明
main.js/ts - 应用入口，初始化Vue实例
App.vue - 根组件，包含路由视图
router/index.js - 路由配置中心
store/index.js - 状态管理配置
components/ - 可复用的公共组件
views/ - 页面级组件，通常与路由对应
状态管理
Pinia（官方推荐，替代 Vuex）
简化的 API，支持 TypeScript，无需 mutations，直接通过 actions 修改状态：
vue3 常用UI框架
Element Plus
基于 Vue 3 的 Element UI 升级版，适合中后台管理系统开发。
提供丰富的组件（表格、表单、弹窗等）
支持按需引入和主题定制
文档完善，社区活跃
安装命令：npm install element-plus --save
Vant
轻量级移动端组件库，由有赞团队维护。
支持 Vue 3 的 Composition API
提供 60+ 移动端常用组件
支持 REM 和 VW 布局适配
安装命令：npm install vant@next --save
vue3 提升性能的方法
减少响应式数据使用
仅在需要动态更新的数据上使用ref或reactive，静态数据可直接用普通变量。过度使用响应式系统会增加内存和计算开销。
// 不推荐
const staticData = reactive({ list: [...] });// 推荐
const staticData = { list: [...] };
const dynamicData = reactive({ count: 0 });合理使用计算属性
计算属性(computed)会自动缓存结果，避免在模板中重复执行复杂逻辑。但需注意避免嵌套过深的计算属性链。
const filteredList = computed(() => largeList.value.filter(item => item.active)
);组件懒加载
const AsyncComp = defineAsyncComponent(() => import('./components/HeavyComponent.vue')
);虚拟滚动优化长列表
<RecycleScroller:items="largeList":item-size="50"v-slot="{ item }"
><div>{{ item.text }}</div>
</RecycleScroller>事件防抖与节流
<div v-memo="[id]"><DynamicComponent :id="id" />
</div>避免不必要的组件渲染
<div v-memo="[id]"><DynamicComponent :id="id" />
</div>优化侦听器
watch(() => props.id,(newVal) => { /* 逻辑 */ },{ immediate: true }
);生产环境构建配置
// vite.config.js
export default defineConfig({plugins: [vue({reactivityTransform: true})]
});使用KeepAlive缓存组件
<KeepAlive include="TabComponent"><component :is="currentComponent" />
</KeepAlive>手动控制依赖追踪
const heavyObject = markRaw({ ... });
const shallowObj = shallowRef({ ... });vite.config 配置基本说明
Vite 的配置文件 vite.config.js 默认导出一个对象，支持通过 defineConfig 包装以获取类型提示（需安装 vite 或 @vitejs/plugin-vue 等插件包）
import { defineConfig } from 'vite';export default defineConfig({// 配置项
});常用配置项说明
根目录与路径别名
root: 项目根目录（默认为 process.cwd()）。
base: 部署基础路径（如 /sub-path/）。
resolve.alias: 路径别名配置。
import path from 'path';export default defineConfig({root: './src',base: '/my-app/',resolve: {alias: {'@': path.resolve(__dirname, './src'),},},
});开发服务器配置
server.port: 指定端口（默认 5173）。
server.proxy: 配置代理解决跨域。
export default defineConfig({server: {port: 3000,proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,},},},
});生产构建配置
build.outDir: 输出目录（默认 dist）。
build.minify: 是否压缩代码（默认 esbuild）。
build.sourcemap: 是否生成 sourcemap。
export default defineConfig({build: {outDir: 'build',minify: 'terser',sourcemap: true,},
});插件配置
通过 plugins 数组引入插件，例如 Vue 或 React 支持：
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
});环境变量与模式
envDir: 环境变量文件目录（默认根目录）。
mode: 指定运行模式（如 development 或 production）。
export default defineConfig({envDir: './env',mode: 'development',
});