王玉军博客

Appearance

Vue2 开发指南 ​

简介 ​

Vue2 是一个渐进式 JavaScript 框架，用于构建用户界面。本文将介绍 Vue2 的核心概念、组件系统和最佳实践。

基础概念 ​

1. 实例和模板 ​

javascript
// 创建 Vue 实例
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
});

// 模板语法
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

2. 计算属性和侦听器 ​

javascript
new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    firstName(newVal, oldVal) {
      console.log('firstName changed:', oldVal, '->', newVal)
    }
  }
});

组件系统 ​

1. 组件定义 ​

javascript
// 子组件
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

// 父组件
new Vue({
  el: '#app',
  data: {
    parentMessage: 'Message from parent'
  }
});

// 模板
<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

2. 事件处理 ​

javascript
// 子组件
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button v-on:click="$emit('increment')">
      You clicked me {{ count }} times.
    </button>
  `
});

// 父组件
new Vue({
  el: '#app',
  data: {
    total: 0
  },
  methods: {
    incrementTotal() {
      this.total += 1
    }
  }
});

组件通信 ​

1. 事件总线 ​

javascript
// 创建事件总线
const EventBus = new Vue();

// 发送事件
EventBus.$emit('custom-event', { data: 'some data' });

// 接收事件
EventBus.$on('custom-event', (data) => {
  console.log(data);
});

2. Vuex 状态管理 ​

javascript
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

路由管理 ​

1. Vue Router 配置 ​

javascript
// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

2. 导航守卫 ​

javascript
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

性能优化 ​

1. 组件优化 ​

javascript
// 异步组件
Vue.component('async-component', () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
}));

// 函数式组件
Vue.component('functional-component', {
  functional: true,
  props: ['message'],
  render(h, context) {
    return h('div', context.props.message);
  }
});

2. 列表优化 ​

javascript
// 使用 key
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

// 虚拟滚动
import VirtualScroller from 'vue-virtual-scroller';

Vue.use(VirtualScroller);

<virtual-scroller
  class="scroller"
  :items="items"
  :item-height="50"
>
  <template v-slot="{ item }">
    <div class="item">
      {{ item.text }}
    </div>
  </template>
</virtual-scroller>

最佳实践 ​

1. 组件设计 ​

javascript
// 组件命名
Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    <div class="todo-item">
      <input
        type="checkbox"
        :checked="todo.completed"
        @change="$emit('toggle', todo.id)"
      >
      <span :class="{ completed: todo.completed }">
        {{ todo.text }}
      </span>
    </div>
  `
});

2. 代码组织 ​

javascript
// 目录结构
src/
  components/
    TodoItem.vue
    TodoList.vue
  views/
    Home.vue
    About.vue
  store/
    index.js
    modules/
      todos.js
  router/
    index.js
  utils/
    api.js
    helpers.js

工具链 ​

1. 开发工具 ​

json
{
  "devDependencies": {
    "@vue/cli-service": "^4.5.0",
    "vue-template-compiler": "^2.6.0",
    "babel-eslint": "^10.1.0",
    "eslint-plugin-vue": "^7.0.0"
  }
}

2. 插件系统 ​

javascript
// 插件定义
const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.$myMethod = function() {
      // 实现方法
    };
    
    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        // 实现指令
      }
    });
  }
};

// 使用插件
Vue.use(MyPlugin);

总结 ​

Vue2 提供了丰富的功能和灵活的组件系统，通过合理使用其特性和遵循最佳实践，可以构建出高效、可维护的应用程序。

参考资源 ​