Vue核心概念笔记

一、基础概念

1.1 框架定位

渐进式框架‌：可逐步采用，从[文]简单功能到复杂应用

核心思想‌：数据驱动视图，数[章]据变化自动更新界面

双向绑定‌：数据与视图自动同[来]步更新

1.2 核心特性

响应式系统‌：数据变化自动触[自]发视图更新

组件化‌：封装可复用UI单元[一]，支持嵌套组合

模板语法‌：HTML扩展语法[道]，支持数据绑定和指令

二、核心API

2.1 数据绑定

Mustache语法‌：{{[，] }} 插值表达式

属性绑定‌：v-bind（简[一]写 :）动态绑定属性

事件绑定‌：v-on（简写 @）处理用户交互

2.2 指令系统

条件渲染‌：

v-if：动态添加/移除DO[个]M元素（适合切换频率低）

v-show：通过CSS控制[分]显示/隐藏（适合频繁切换）

列表渲染‌：

v-for：循环渲染数组/对[享]象

必须指定key‌：优化性能，[的]标识元素身份

表单绑定‌：

v-model：实现表单元素[网]与数据的双向绑定

三、组件系统

3.1 组件基础

注册方式‌：

全局注册：Vue.compo[站]nent('my-c[文]omponent',[章] {...})

局部注册：在组件选项中注册

组件通信‌：

父传子：props 接收数据

子传父：$emit 触发自定义事件

3.2 生命周期

核心钩子‌：

created：数据初始化完[来]成，DOM未生成

mounted：DOM挂载完[自]成

updated：数据更新触发[一]视图重渲染

destroyed：组件销毁[道]前清理

四、进阶特性

4.1 计算属性与侦听器

计算属性‌ (computed)：

基于响应式数据计算派生值

自动缓存，依赖不变时直接返回[，]结果

侦听器‌ (watch)：

响应数据变化执行异步操作

适合处理复杂逻辑或副作用

4.2 组合式API（Vue 3）

核心函数‌：

ref：定义响应式数据（基础[一]类型）

reactive：定义响应式[个]对象

优势‌：

逻辑复用更灵活

代码组织更符合单一职责原则

五、工程化实践

5.1 状态管理

Vuex‌（Vue 2）：

集中式状态管理

单向数据流：mutation[分]s 修改状态

Pinia‌（Vue 3）：

轻量级替代方案

更简单的API设计

5.2 路由管理

Vue Router‌：

实现单页应用（SPA）导航

动态路由匹配：<rou[享]ter-link> 和 <router-vie[的]w>

路由守卫‌：

控制页面访问权限

示例：beforeEach 拦截未登录用户

六、性能优化

Tree-shaking‌：[网]

仅打包使用到的代码（Vue 3 支持）

减少最终包体积

虚拟DOM‌：

最小化DOM操作

通过Diff算法高效更新

七、Vue 3 新特性

Composition API‌：

替代data/methods[站]选项式写法

示例：使用setup()组织[文]逻辑

Teleport‌：

将组件渲染到DOM任意位置

Suspense‌：

处理异步组件加载状态

八、学习资源

官方文档‌：https://[章]vuejs.org/

构建工具‌：Vite（极速开[来]发服务器）

调试工具‌：Vue Devtools（浏览器扩展[自]）