核心规则：
测试函数前面加 async
所有「操作页面 / 等待」的代码前面加 await
一、核心语法（按使用频率排序）
1. 变量声明：let /const（彻底扔掉 var）
作用
let：声明会变的变量
const：声明不变的常量（优先用 const，更安全）
bash
// 会变的用 let
let count = 0
count = 1 // 可以改
// 不变的用 const（推荐）
const name = "小明"
name = "小红" // 报错，不能改2. 箭头函数：() => {}（Vue 写得最多）
作用
简化函数写法
没有烦人的 this 指向问题
bash
// 传统函数（麻烦）
function add(a,b){ return a + b }
// ES6 箭头函数（简洁）
const add = (a,b) => a + b
// 无参数
const sayHi = () => alert("你好")
// 多行逻辑加大括号
const handleClick = () => {
console.log("点击了")
return 123
}✅ Vue 常用
bash
// 定时器、回调、事件处理
setTimeout(() => {
console.log("延迟执行")
}, 1000)⚠️ 避坑（重要）
Vue 的 methods 里不能用箭头函数，会拿不到 this
bash
// 错误
methods: {
increment: () => { this.count++ } // this 失效
}
// 正确
methods: {
increment(){ this.count++ }
}3. 模板字符串： （反引号，告别 + 拼接）
作用
轻松拼接变量 + 文字，支持换行
bash
const name = "张三"
const age = 20
// 传统拼接（乱）
const str = "我是" + name + "，今年" + age + "岁"
// ES6 模板字符串（清爽）
const str = `我是${name}，今年${age}岁`
// 支持换行
const html = `
<div>
<p>姓名：${name}</p>
</div>
`4. 解构赋值：快速拿对象 / 数组里的值
作用
一行代码取出多个数据，不用反复写 .
bash
① 对象解构
const user = { name:"李四", age:25, city:"北京" }
// 传统取值
const name = user.name
const age = user.age
// ES6 解构（一行搞定）
const { name, age, city } = user
② 数组解构
const arr = ["苹果", "香蕉", "橙子"]
const [a, b, c] = arr
console.log(a) // 苹果Vue 场景
取 props 数据
取接口返回的对象
取 reactive 数据
// Vue3 setup 解构 props
const { title, list } = props5. 扩展运算符：...（复制 / 合并神器）
作用
展开数组 / 对象，用于复制、合并、传参
bash
// 复制数组
const arr1 = [1,2,3]
const arr2 = [...arr1] // 完整复制一份
// 合并数组
const arr3 = [...arr1,4,5] // [1,2,3,4,5]
// 复制对象
const user1 = {name:"小红"}
const user2 = {...user1, age:20}Vue 场景
复制响应式数组 / 对象（不污染原数据）
合并参数、传递 props
6. 模块化：import /export（Vue 必用）
作用
导入 / 导出组件、样式、工具函数、配置
① 导出（给别人用）
bash
// 单个导出
export const name = "vidaXL"
// 默认导出（组件常用）
export default EmailPage② 导入（用别人的）
bash
// 导入组件
import EmailPage from "@/views/EmailPage/index.vue"
// 导入样式
import "@/assets/styles/email-page.css"
// 导入工具
import { request } from "@/utils/request"Vue 场景
所有页面、组件、样式、工具都这么导入导出
7. 函数默认参数
作用
不传参时用默认值，不报错
示例
bash
// 不传 size，默认用 16
function setFont(text, size=16){
console.log(text, size)
}
setFont("标题") // 标题 16
setFont("内容", 20) // 内容 208. 异步请求：Promise + async/await（调接口）
作用
优雅写接口请求，告别回调地狱
示例（Vue 调接口）
bash
// 用 async/await 拿数据（最常用）
async function getList(){
try {
// 等待接口返回结果
const res = await fetch("/api/list")
const data = await res.json()
console.log("数据", data)
} catch (err) {
console.log("报错", err)
}
}Vue 场景
页面加载请求列表、提交表单、获取详情
- 数组常用新方法
bash
① map（遍历并返回新数组）
const arr = [1,2,3]
const newArr = arr.map(item => item * 2)
// [2,4,6]
② filter（筛选数组）
const arr = [10,20,30]
const newArr = arr.filter(item => item > 15)
// [20,30]Vue 场景
处理列表数据、筛选展示内容
10. 对象简写（代码更短）
作用
键名和变量名一样时，可以只写一个
示例
bash
const name = "vidaXL"
const url = "https://xxx.com"
// 传统
const obj = { name:name, url:url }
// ES6 简写
const obj = { name, url }Vue 场景
setup 返回数据、data 定义、传参对象
- 防报错神器：可选链？. + 空值合并？？
① 可选链？.（取深层属性不报错）
javascript
运行
const user = {}
// 传统（没值会报错）
const city = user.profile.address.city
// ES6 可选链（没值返回 undefined，不崩溃）
const city = user?.profile?.address?.city
② 空值合并？？（没值时用默认）
javascript
运行
const theme = null
// 为 null/undefined 时用默认
const currentTheme = theme ?? "light"
Vue 场景
接口数据嵌套层级深、防止页面白屏报错
三、小白速查总结（背会这 7 个就够写 Vue）
变量：const 优先，let 次之，扔掉 var
函数：() => {} 简化写法（methods 别用）
字符串：${变量} 告别 + 拼接
取值：const {a,b} = 对象 快速解构
复制：... 展开数组 / 对象
导入：import/export 模块化
防错：?. 取深层数据不崩溃