前端框架与 Vue

整理自笔记：Vue2/3、Pinia/Vuex、Router、TypeScript、生命周期、插槽、响应式等。

一、生命周期（uni 语法）

beforeCreate → onLoad → onShow → created → beforeMount → onReady → mounted

二、动态样式三目

:style="showSearch ? 'font-size: 20px': 'font-size:10px'"
:style="{'font-size': showSearch ? '20px' : '10px' }"
:style="[{'font-size': showSearch ? '20px' : '10px'}]"
:class="showSearch ? 'font-big': 'font-smal'"
:class="{'font-big': showSearch}"
:class="[{'font-big': showSearch}]"

三、动态背景图

Vue-loader 自动处理 src 相对路径；动态路径必须 require/import 显式告诉 Webpack：

data() { return { bgImage: require('../../assets/import/aa1.png') } }

四、Vue 插值换行

\n 默认合并空白忽略换行；pre 保留；pre-wrap 保留且自动换行（✅ 推荐）；pre-line 合并空白保留 \n。

五、v-bind 传值

带冒号：数字/字符串/变量；不带冒号：字符串。

六、组件命名

<PascalCase /> 模板更明显，是合法 JS 标识符，IDE 补全好；Vue 支持 kebab-case 解析为 PascalCase 注册组件。

七、ref / reactive

API	操作方式	限制 / 注意
ref	通过 .value 操作	普通/对象类型均可，推荐
reactive	直接访问属性	不能用于普通类型（丢响应式）；整体赋值丢响应式；可单个赋值

• 清空对象：Object.keys(obj).forEach(key => delete obj[key]) 或 Object.assign。
• 清空数组：arr.length = 0；完全替换 arr.splice(0, arr.length, ...arr1)；push 多个 arr.push(...arr1)。

---

八、TypeScript 类型

let num: number
let str: string
let bool: boolean
let arr: number[]              // 或 Array<number>
let tuple: [string, number]    // 元组
let e: enum {...}
let any: any
let v: void
let n: never

• 响应式默认值断言：age: null as number | null（不是 number | null 直接写）。
• 偷懒接口：interface ObjItem { [key: string]: any }。
• 函数：function func(a: number, b?: number): string {}。
• 接口可选 ?、只读 readonly。
• 类型断言 res as number 或 <number>res；隐式推断 let a = 18 再赋字符串告警。

---

九、Pinia vs Vuex

Vuex 在 Vue 3 时代已进入维护模式，官方强烈推荐 Pinia 作为新项目的状态管理方案。Pinia 是 Vue 官方认可的新一代 store，API 风格与 Vuex 5 提案合并。

对比项	Pinia（推荐）	Vuex（仅存量维护）
mutations / modules	无，每个 store 即模块	有 mutations、modules
同步 / 异步	都在 actions	区分 mutations / actions
getter	取 state（参数 state 或 this）	类似
严格模式	无	有
改状态	可直接改；$patch 改多个；$reset() 重置	commit mutations
解构保响应	storeToRefs	mapState 等
持久化	pinia-plugin-persistedstate 的 persist	需插件
TS 支持	原生完整 TS 支持	Vuex 4 对 TS 支持较弱

---

十、Vue-Router@4

• 用 createRouter；createWebHistory/createWebHashHistory（base 移到参数）；组件级 onBeforeRouteEnter/Leave。

十一、Composition API

• setup 在 beforeCreate 前执行，无 this；参数 props（响应式，勿 ES6 解构，用 toRefs）、context（可解构）。
• defineExpose 暴露属性方法给父 ref；defineEmits 注册事件（宏，无需导入）；defineProps 接收父值。
• useAttrs 接收未声明属性/事件（类似 data-xxx），$attrs 捡漏王，可 v-bind="$attrs" 传孙。
• ref 变响应式但不改源数据；toRef 交互源数据不改视图；toRefs 类似。
• watch(name, (cur, pre)=>{}, {deep, immediate})；watchEffect 非惰性、不指定监听、无前值。
• onMounted/onUpdated；vue3 去 .sync，合并到 v-model（可用多次）。
• <Teleport to="body"> 传送；<Suspense> 协调异步依赖。

Vue 3.3+ 新增 <script setup> 下的 defineModel、defineSlots；3.5+ 新增响应式 defineConfig（无需 computed 包裹）、useTemplateRef。

十二、插槽（V2/V3 一致实测）

1. 默认插槽：组件内 slot，调用方标签内即是。
2. 具名插槽：v-slot:header 或 #content，必须 template 标签；起了名必须传，不传不匹配。
3. 高端：传入属性，默认/具名插槽内展示属性（插槽覆盖属性）。