viarotel-org Vue 2 开发指南
概述
本技能提供 Vue 2.x 框架的完整开发指南，包括 Options API、组件系统、路由管理、状态管理（Vuex）、生命周期等核心概念和最佳实践。
核心特性
1. Options API
Vue 2 使用 Options API 组织组件代码。
基本结构：
<template>
<div>
<p>{{ message }}</p>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
name: 'Counter',
data() {
return {
message: 'Hello Vue 2',
count: 0
}
},
computed: {
doubleCount() {
return this.count * 2
}
},
watch: {
count(newVal, oldVal) {
console.log(`count changed from ${oldVal} to ${newVal}`)
}
},
methods: {
increment() {
this.count++
}
},
mounted() {
console.log('Component mounted')
}
}
</script>
2. 响应式数据
data：定义响应式数据
data() {
return {
message: 'Hello',
count: 0,
user: {
name: 'Vue',
age: 2
}
}
}
注意事项：
- 使用
this.$set添加新属性 - 使用
Vue.set或this.$set修改数组索引
3. 计算属性和监听器
计算属性：
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
监听器：
watch: {
// 简单监听
count(newVal, oldVal) {
// ...
},
// 深度监听
user: {
handler(newVal, oldVal) {
// ...
},
deep: true
}
}
4. 组件开发
组件定义：
<template>
<div>
<h3>{{ title }}</h3>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
title: {
type: String,
required: true
},
content: {
type: String,
default: ''
}
},
emits: ['update', 'delete'],
methods: {
handleClick() {
this.$emit('update', this.title)
}
}
}
</script>
组件通信：
- Props：父 → 子
$emit：子 → 父$parent/$children：父子组件直接访问$refs：访问子组件实例- Vuex：全局状态管理
- EventBus：事件总线
5. 路由管理（Vue Router）
基本配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import('./views/Home.vue')
},
{
path: '/about',
component: () => import('./views/About.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
路由使用：
<template>
<div>
<router-link to="/about">About</router-link>
<router-view />
</div>
</template>
<script>
export default {
methods: {
goToAbout() {
this.$router.push('/about')
}
},
mounted() {
console.log(this.$route.params)
}
}
</script>
6. 状态管理（Vuex）
Store 定义：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
getters: {
doubleCount: state => state.count * 2
},
mutations: {
INCREMENT(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('INCREMENT')
}
}
})
在组件中使用：
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapActions(['increment'])
}
}
</script>
7. 生命周期钩子
export default {
beforeCreate() {
// 实例初始化之后，数据观测之前
},
created() {
// 实例创建完成，数据观测完成
},
beforeMount() {
// 挂载开始之前
},
mounted() {
// 挂载完成
},
beforeUpdate() {
// 数据更新时，DOM 更新之前
},
updated() {
// DOM 更新完成
},
beforeDestroy() {
// 实例销毁之前
},
destroyed() {
// 实例销毁完成
}
}
最佳实践
1. 代码组织
- 使用单文件组件（.vue）
- 合理拆分组件
- 使用 mixins 复用逻辑
2. 性能优化
- 使用
v-if和v-show合理选择 - 使用
key优化列表渲染 - 懒加载路由组件
- 使用
Object.freeze()冻结大对象
3. 组件通信
- 优先使用 Props 和 Events
- 复杂状态使用 Vuex
- 避免过度使用
$parent和$children
4. 响应式注意事项
// 添加新属性
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 中实现组件通信？"
能力边界
✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
常见陷阱 (Gotchas)
- 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
- 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
- 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
- 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
- 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
使用流程
Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
Step 2: 配置初始化
根据项目需求进行基础配置。
Step 3: 核心功能使用
按照示例代码实现核心功能。
Step 4: 测试验证
运行测试确保功能正常。
Step 5: 部署上线
完成开发后进行部署和监控。