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 项目搭建与目录结构说明

1. 环境准备
   确保已安装 Node.js（建议 16.x 及以上版本）
   安装 Vue CLI（如未安装）：npm install -g @vue/cli
2. 创建项目

vue create project-name
 

或使用 Vite 创建：

npm create vite@latest project-name --template vue

3. 选择配置
   手动选择特性
   推荐选择：
   Vue 3
   TypeScript（可选）
   Router
   Vuex/Pinia（状态管理）
   ESLint（代码规范）
4. 安装依赖

cd project-name
npm install
 

5. 启动项目

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',
});