vue2

Vue 2 Development Guide

Overview

This skill provides a complete development guide for the Vue 2.x framework, including core concepts and best practices such as the Options API, component system, routing management, state management (Vuex), and lifecycle.

Core Features

1. Options API

Vue 2 uses the Options API to organize component code.

Basic Structure：

<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. Reactive Data

data: Define reactive data

data() {
  return {
    message: 'Hello',
    count: 0,
    user: {
      name: 'Vue',
      age: 2
    }
  }
}

Notes：

• Use this.$set to add new properties
• Use Vue.set or this.$set to modify array indices

3. Computed Properties and Watchers

Computed Properties：

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

Watchers：

watch: {
  // 简单监听
  count(newVal, oldVal) {
    // ...
  },
  // 深度监听
  user: {
    handler(newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

4. Component Development

Component Definition：

<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>

Component Communication：

• Props: parent → child
• $emit: child → parent
• $parent / $children: direct access between parent and child components
• $refs: access child component instances
• Vuex: global state management
• EventBus: event bus

5. Routing Management (Vue Router)

Basic Configuration：

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
})

Route Usage：

<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. State Management (Vuex)

Store Definition：

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')
    }
  }
})

Using in Components：

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

7. Lifecycle Hooks

export default {
  beforeCreate() {
    // 实例初始化之后，数据观测之前
  },
  created() {
    // 实例创建完成，数据观测完成
  },
  beforeMount() {
    // 挂载开始之前
  },
  mounted() {
    // 挂载完成
  },
  beforeUpdate() {
    // 数据更新时，DOM 更新之前
  },
  updated() {
    // DOM 更新完成
  },
  beforeDestroy() {
    // 实例销毁之前
  },
  destroyed() {
    // 实例销毁完成
  }
}

Best Practices

1. Code Organization

• Use single-file components (.vue)
• Split components reasonably
• Use mixins to reuse logic

2. Performance Optimization

• Use v-if and v-show choose reasonably
• Use key to optimize list rendering
• Lazy-load route components
• Use Object.freeze() to freeze large objects

3. Component Communication

• Prefer Props and Events
• Use Vuex for complex state
• Avoid overusing $parent and $children

4. Reactivity Notes

// 添加新属性
this.$set(this.user, 'age', 25)

// 修改数组索引
this.$set(this.items, 0, newItem)

// 修改数组长度
this.items.splice(newLength)

Common Tools and Plugins

• Vue CLI: project scaffolding
• Vue Router: routing management
• Vuex: state management
• Element UI: UI component library
• Ant Design Vue: UI component library
• Axios: HTTP client

Example Prompts

• "Create a counter component using Vue 2"
• "How do I use Vuex for state management in Vue 2?"
• "Create a Vue 2 project using Vue CLI"
• "What lifecycle hooks does Vue 2 have?"
• "How do I implement component communication in Vue 2?"