Vue 2 基础用法与注意点
Vue 2 基础用法与注意点
Vue 2 是一套用于构建用户界面的渐进式框架，核心思想是 数据驱动视图：通过 选项式 API（Options API） 把 data、methods、computed 等组织在一个组件选项对象里。下面从「怎么写」到「要注意什么」做简要梳理。
1. 最小示例：挂载与数据
const vm = new Vue({
el: "#app",
data: {
message: "Hello",
},
});
<div id="app">{{ message }}</div>
或使用 运行时 + 编译器 版本，在构建工具里写 单文件组件（SFC） .vue。
2. 常用选项（Options API）
| 选项 | 作用 |
|---|---|
data | 返回组件的响应式状态（必须是函数返回对象，避免多实例共享引用） |
methods | 事件处理、可被模板调用的方法 |
computed | 依赖数据变化的派生值，带缓存 |
watch | 监听某数据变化后执行异步或开销大的逻辑 |
props | 父传子数据 |
components | 注册局部子组件 |
生命周期（节选）：beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed（Vue 2.7 中 destroy 相关命名与 Vue 3 的 unmounted 不同，迁移时需对照）。
3. 模板语法要点
- 插值：
{{ }}，内部为表达式，不是任意语句。 v-bind/:attr：绑定属性；v-on/@event：绑定事件。v-ifvsv-show：v-if条件为假时不渲染 DOM；v-show始终渲染，用 CSS 切换显示。v-for：列表渲染务必加:key，且 key 应稳定、唯一（避免用数组下标作为唯一 key，除非列表静态且顺序不变）。
4. 父子通信（简要）
- 父 → 子：
props（单向向下，不要在子组件里直接改 prop，应通过$emit或本地 data 拷贝）。 - 子 → 父：
$emit('事件名', payload)。 - 跨层级/兄弟：Vuex、EventBus（不推荐大规模滥用）、或 provide / inject（Vue 2.2+）。
5. Vue 2 响应式上的注意点（重点）
Vue 2 用 Object.defineProperty 把 data 里已有属性做成响应式，因此：
对象
- 不能靠直接赋值检测新增属性：应使用
Vue.set(obj, key, value)或this.$set。 - 删除属性用
Vue.delete或this.$delete，否则视图可能不更新。
数组
- 通过 下标 直接赋值：
arr[i] = x可能不触发更新；应使用Vue.set、splice等 API 或替换整个数组。 - 修改
length也可能无法被正确追踪。 - 变异方法（
push、pop、splice等）已被包装，可触发更新。
异步更新
数据变化 → DOM 更新 在同一事件循环里批量、异步完成，若在 data 赋值后立刻读 DOM，可能仍是旧值，需用 $nextTick(callback)。
6. 优点
| 优点 | 说明 |
|---|---|
| 上手曲线 | 选项式 API 与模板直观，官方文档与教程丰富 |
| 生态成熟 | Vue 2 时代大量 UI 库、业务插件、问答沉淀 |
| 渐进式 | 可只用在页面局部，也可配合 Vue Router / Vuex 做完整 SPA |
| 单文件组件 | 模板、样式、逻辑分离清晰，工程化工具链成熟 |
7. 缺点与局限
| 缺点 | 说明 |
|---|---|
| 响应式实现 | 基于 defineProperty，对对象增删属性、数组部分写法需额外 API，心智负担 |
| 性能与包体积 | 相对 Vue 3，运行时优化与 tree-shaking 空间较小 |
| TypeScript | 类型推导与组合式 API 时代相比偏弱（需额外技巧与类型辅助） |
| 长期维护 | Vue 2 已结束官方支持，新项目应优先 Vue 3；老项目需规划迁移或评估风险 |
8. 小结
- 写 Vue 2 组件：
data用函数返回、methods里处理交互、computed做派生、watch做副作用监听。 - 牢记：响应式盲区、数组与对象、
$nextTick。 - 新项目建议直接使用 Vue 3；维护 Vue 2 项目时，可阅读官方 Vue 2 文档 与 迁移指南。若需从实现层面对比 Vue 2 与 Vue 3，可参阅 Vue 2 核心实现思路与 Vue 3 的主要区别。