概述
本技能提供 Vue 2.x 框架的完整开发指南，包括 Options API、组件系统、路由管理、状态管理（Vuex）、生命周期等核心概念和最佳实践。
核心特性
1. Options API
Vue 2 使用 Options API 组织组件代码。基本结构包含 template 模板与 script 脚本，脚本中通过 name、data、computed、watch、methods、mounted 等选项定义组件。示例中展示了一个计数器组件，包含 message 与 count 数据、doubleCount 计算属性、count 监听器、increment 方法以及 mounted 生命周期钩子。
2. 响应式数据
data 用于定义响应式数据，可返回 message、count、user 等字段。注意事项：使用 this.$set 添加新属性；使用 Vue.set 或 this.$set 修改数组索引。
3. 计算属性和监听器
计算属性通过 computed 定义，例如 fullName 返回拼接后的姓名。监听器通过 watch 定义，支持简单监听（如 count）和带 handler 与 deep: true 的深度监听（如 user）。
4. 组件开发
组件定义包含 template 与 script，script 中通过 name、props、emits、methods 定义。props 支持 type、required、default 等配置。组件通信方式包括：Props（父 → 子）、$emit（子 → 父）、$parent / $children（父子组件直接访问）、$refs（访问子组件实例）、Vuex（全局状态管理）、EventBus（事件总线）。
5. 路由管理（Vue Router）
基本配置通过 import Vue 与 VueRouter、调用 Vue.use(VueRouter)、定义 routes 数组（含 path 与 component，支持动态 import 懒加载）、创建 VueRouter 实例（可设置 mode: 'history'）。路由使用包括 router-link 与 router-view 组件，以及通过 this.$router.push 跳转、this.$route.params 读取参数。
6. 状态管理（Vuex）
Store 定义通过 import Vue 与 Vuex、调用 Vue.use(Vuex)、导出 new Vuex.Store 实例，包含 state、getters、mutations、actions。在组件中使用时可借助 mapState、mapGetters、mapActions 辅助函数。
7. 生命周期钩子
生命周期钩子包括：beforeCreate（实例初始化之后，数据观测之前）、created（实例创建完成，数据观测完成）、beforeMount（挂载开始之前）、mounted（挂载完成）、beforeUpdate（数据更新时，DOM 更新之前）、updated（DOM 更新完成）、beforeDestroy（实例销毁之前）、destroyed（实例销毁完成）。
最佳实践
- 代码组织：使用单文件组件（.vue）；合理拆分组件；使用 mixins 复用逻辑。
- 性能优化：使用 v-if 和 v-show 合理选择；使用 key 优化列表渲染；懒加载路由组件；使用 Object.freeze() 冻结大对象。
- 组件通信：优先使用 Props 和 Events；复杂状态使用 Vuex；避免过度使用 $parent 和 $children。
- 响应式注意事项：添加新属性使用 this.$set(this.user, 'age', 25)；修改数组索引使用 this.$set(this.items, 0, newItem)；修改数组长度使用 this.items.splice(newLength)。
常用工具和插件
Vue CLI（项目脚手架）、Vue Router（路由管理）、Vuex（状态管理）、Element UI（UI 组件库）、Ant Design Vue（UI 组件库）、Axios（HTTP 客户端）。
示例 Prompt
- 使用 Vue 2 创建一个计数器组件
- 如何在 Vue 2 中使用 Vuex 进行状态管理？
- 创建一个 Vue 2 项目，使用 Vue CLI
- Vue 2 的生命周期钩子有哪些？
- 如何在 Vue 2 中实现组件通信？