Vue模板支持插值{{}}、指令如v-bind/v-if/v-for、事件@click，仅限表达式；响应式在Vue2用Object.defineProperty、Vue3用Proxy；父子通信用props/$emit，深层用provide/inject；组合式API提供onMounted等钩子及自定义Hook。
Vue 模板语法：写得像 HTML，运行却有逻辑
Vue 的模板不是静态 HTML，而是支持插值、指令和事件绑定的动态视图层。用 {{ }} 插值显示数据，比如 {{ message }}；用 v-bind:（简写 :）动态绑定属性，如 :class="isActive"；用 v-if、v-for 控制渲染逻辑；用 @click（即 v-on:click）响应用户操作。
注意：模板中不能写复杂语句，只支持表达式（如 a + b、items.filter(x => x.active)），不支持 if/for 语句。逻辑尽量提取到 methods 或 computed 中。
响应式数据：data 是对象，但 Vue 做了深层代理
在 Vue 2 中，响应式靠 Object.defineProperty 实现；Vue 3 改用 Proxy，支持新增/删除属性、数组索引赋值等原生操作。定义响应式数据时：
- 选项式 API 中，在 data() 函数里返回一个对象，所有顶层属性自动响应式
- 组合式 API 中，用 ref() 包裹基础类型（如数字、字符串），用 reactive() 包裹对象或数组
- 访问 ref 值必须加 .value，但在模板中 Vue 自动解包，无需写 count.value
组件通信：父子传值有套路，跨级别靠 provide/inject
父传子用 props，子传父用 $emit 触发自定义事件（Vue 3 推荐用 defineEmits 显式声明）。常见模式：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 父组件通过 :title="pageTitle" 传值，子组件用 props: ['title'] 或 props: { title: String } 接收
- 子组件调用 this.$emit('update:title', newTitle)（Vue 2）或 emit('update:title', newTitle)（Vue 3）通知父组件
- 深层嵌套时，用 provide 向下注入数据，子组件用 inject 获取，适合配置、状态管理轻量场景
生命周期与逻辑复用：从 mounted 到 Composition API
选项式 API 的钩子如 created、mounted、beforeUnmount（Vue 3 替代 beforeDestroy）仍可用；但组合式 API 提供更灵活的组织方式：
- onMounted()、onUpdated()、onUnmounted() 替代对应选项钩子
- 把相关逻辑（如数据获取 + 加载状态 + 错误处理）封装进自定义 Hook（一个调用多个组合式 API 的函数），比如 useFetch(url)
- 避免在 setup 中直接操作 this，所有响应式变量、方法都需显式返回或使用 ref/computed/watch
不复杂但容易忽略
初学时先跑通一个带数据绑定、条件渲染、简单交互的组件，再逐步加入计算属性、侦听器、组件拆分。记住：Vue 的核心是让视图随数据自然更新——你改数据，它就重绘；你写模板，它就解析。不用手动 DOM 操作，也不用反复思考“什么时候该刷新”。
