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（浏览器扩展[自]）
