一、核心基础：
✅ 2. 响应式数据定义（Vue3 核心，3 种常用方式）
响应式：数据变化时，页面视图自动更新，Vue3 废弃了 Vue2 的 data(){return{}}，全部用组合式 API 定义，优先级：ref > reactive > readonly
vue
php 体验AI代码助手 代码解读复制代码
✅ 核心区别记忆：ref 管基本类型，.value 是标识；reactive 管复杂类型，直接用
✅ 3. 方法定义 & 事件绑定（methods 替代方案）
Vue3 中没有 methods 选项，直接在
二、父子组件通信（高频！开发必用，4 种核心写法）
Vue3 组件通信是项目开发的核心，所有写法都是基于
✅ 2. 子传父：defineEmits （最常用，子组件给父组件传值 / 触发事件）
子组件不能直接修改父组件数据，通过派发事件的方式通知父组件修改，完美遵循单向数据流
vue
xml 体验AI代码助手 代码解读复制代码
✅ 3. 父组件获取子组件的属性 / 方法：defineExpose （常用，子组件暴露内容）
Vue3 中
✅ 4. 祖孙组件通信：provide / inject （跨层级传值，无需逐层传递）
解决「父传子传孙」的多层级传参问题，父组件通过 provide 提供数据，子孙组件通过 inject 注入数据，无论层级多深都能获取，无需逐层 props 传递，非常实用
vue
xml 体验AI代码助手 代码解读复制代码
三、计算属性 & 监听器（核心 API，Vue3 写法）
✅ 1. 计算属性 computed - 依赖值变化自动更新，有缓存（推荐）
替代复杂的模板表达式，处理数据格式化、数据拼接、条件计算等，有缓存，依赖值不变时不会重复执行，性能优于方法
vue
xml 体验AI代码助手 代码解读复制代码
✅ 2. 监听器 watch - 监听数据变化，执行回调（4 种写法全覆盖）
Vue3 废弃了 Vue2 的 watch:{}，改用组合式 API watch，功能更强大，支持监听单个值、多个值、深度监听、立即执行，无数据变化不执行，按需触发
vue
xml 体验AI代码助手 代码解读复制代码
✅ 补充：watchEffect 懒人版监听，无需指定监听目标，自动收集依赖，初始化必执行，适合简单场景，按需使用即可。
四、生命周期钩子（Vue3 完整生命周期，无 Options API）
✅ 核心说明
Vue3 生命周期全部是组合式 API 函数，需要手动引入才能使用
所有生命周期钩子都写在
✅ 开发高频使用：onMounted（初始化请求） + onUnmounted（清理副作用），占 90% 的业务场景
五、Vite 项目 核心配置文件 vite.config.js（完整版，可直接复制）
你的项目 vue3-vite-demo 根目录的 vite.config.js 是 Vite 的核心配置文件，所有项目优化、路径别名、跨域代理、打包配置都在这里写，下面是完整版通用配置，包含开发中 99% 的配置项，复制即用，注释清晰！
javascript
运行
javascript 体验AI代码助手 代码解读复制代码// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 路径别名：需要安装 npm i @types/node -D 解决路径报错
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
// 1. 插件配置
plugins: [vue()],
// 2. 路径别名配置（最常用！简化导入路径，不用写../../）✅
resolve: {
alias: {
'@': path.resolve(__dirname, './src'), // @ 指向 src目录
'@components': path.resolve(__dirname, './src/components'),
'@api': path.resolve(__dirname, './src/api')
}},
// 3. 开发服务器配置（解决跨域！接口代理，必配）✅✅✅
server: {
port: 8080, // 项目启动端口
open: true, // 启动后自动打开浏览器
host: '0.0.0.0', // 允许局域网访问
// 跨域代理：解决前端请求后端接口的跨域问题
proxy: {
'/api': {
target: 'https://localhost:44352', // 你的后端接口地址
changeOrigin: true, // 开启跨域
rewrite: (path) => path.replace(/^/api/, '') // 去掉/api前缀
}
}},
// 4. 打包配置（优化打包体积、解决中文乱码、指定打包目录）✅
build: {
outDir: 'dist', // 打包输出目录
assetsDir: 'assets', // 静态资源目录
charset: 'utf-8', // 解决打包后中文乱码
minify: 'esbuild', // 打包压缩方式，更快更小
sourcemap: false, // 关闭sourcemap，减小打包体积
rollupOptions: {
// 分包配置，优化打包速度
output: {
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: '[ext]/[name]-[hash].[ext]'
}
}},
// 5. CSS配置（全局样式、预处理器）
css: {
preprocessorOptions: {
scss: {
// 全局引入scss变量/混合器，无需在每个组件中import
additionalData: '@import "@/styles/variable.scss";'
}
}}
})
六、项目开发 高频实战语法（你之前用到的，补充完整版）
✅ 1. Axios 请求在 Vue3 中的完整写法（你的登录接口，无报错版）
结合你之前的代码，补充 Vue3 + Axios 的标准写法，包含异步、错误捕获、中文不乱码，直接替换你的代码即可
vue
xml 体验AI代码助手 代码解读复制代码
✅ 2. 路由配置（Vue3 + VueRouter4 完整版，项目必配）
vue3-vite-demo 中如果需要路由，安装 npm i vue-router@4，然后在 src/router/index.js 配置，核心写法：
javascript
运行
javascript 体验AI代码助手 代码解读复制代码// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
const routes = [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
const router = createRouter({
history: createWebHistory(), // 无#号路由
routes
})
// 路由守卫：登录拦截
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('token')
if (to.path !== '/login' && !token) {
next('/login')} else {
next()}
})
export default router
然后在 main.js 引入：
javascript
运行
javascript 体验AI代码助手 代码解读复制代码// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
七、Vue3 与 Vue2 核心区别（避坑必备，快速记忆）
语法核心：Vue2 是 Options API（选项式），Vue3 是 Composition API（组合式）+