Provides comprehensive guidance for Vue 2.x development including Options API, components, directives, lifecycle hooks, computed properties, watchers, Vuex state management, and Vue Router. Use when the user asks about Vue 2, needs to create Vue 2 components, implement reactive data binding, handle component communication, or work with Vue 2 ecosystem tools.
本技能提供 Vue 2.x 框架的完整开发指南，包括 Options API、组件系统、路由管理、状态管理（Vuex）、生命周期等核心概念和最佳实践。
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>
data：定义响应式数据
data() {
return {
message: 'Hello',
count: 0,
user: {
name: 'Vue',
age: 2
}
}
}
注意事项：
this.$set 添加新属性Vue.set 或 this.$set 修改数组索引计算属性：
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
监听器：
watch: {
// 简单监听
count(newVal, oldVal) {
// ...
},
// 深度监听
user: {
handler(newVal, oldVal) {
// ...
},
deep: true
}
}
组件定义：
<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>
组件通信：
$emit：子 → 父$parent / $children：父子组件直接访问$refs：访问子组件实例基本配置：
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>
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>
export default {
beforeCreate() {
// 实例初始化之后，数据观测之前
},
created() {
// 实例创建完成，数据观测完成
},
beforeMount() {
// 挂载开始之前
},
mounted() {
// 挂载完成
},
beforeUpdate() {
// 数据更新时，DOM 更新之前
},
updated() {
// DOM 更新完成
},
beforeDestroy() {
// 实例销毁之前
},
destroyed() {
// 实例销毁完成
}
}
v-if 和 v-show 合理选择key 优化列表渲染Object.freeze() 冻结大对象$parent 和 $children// 添加新属性
this.$set(this.user, 'age', 25)
// 修改数组索引
this.$set(this.items, 0, newItem)
// 修改数组长度
this.items.splice(newLength)
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控��