Vue2

Vue.js 是一款渐进式 JavaScript 框架，凭借其简洁的语法和高效的响应式系统，成为前端开发的热门选择。Vue2 作为经典版本，至今仍广泛应用于企业级项目。本文将通过核心特性与实例代码，带你快速掌握 Vue2 的核心用法。

一、响应式数据驱动

Vue2 的响应式系统基于 Object.defineProperty 实现，通过劫持数据属性的 getter 和 setter，自动追踪依赖并更新视图。

javascript

new Vue({ data() { return { message: 'Hello Vue!' }; }, template: `<div>{{ message }}</div>`});

当 message 的值变化时，视图会自动重新渲染，无需手动操作 DOM。

二、组件化开发

Vue2 的核心思想是组件化，每个组件包含独立的逻辑、模板与样式。

html

<template> <button @click="count++">点击了 {{ count }} 次</button></template><script>export default { data() { return { count: 0 }; }};</script>

通过 props 接收父组件数据，$emit 触发自定义事件实现父子通信：

html

<child-component :title="parentTitle" @update="handleUpdate"/>

三、模板指令

Vue2 提供丰富的模板指令，简化 DOM 操作：

数据绑定：v-bind:href="url" 或简写 :href="url"

双向绑定：v-model="inputValue"（常用于表单）

循环渲染：v-for="item in list" :key="item.id"

条件渲染：v-if（动态添加/移除元素）与 v-show（切换 CSS 显示）

四、生命周期钩子

Vue2 组件从创建到销毁经历多个阶段，常用钩子函数：

created：数据初始化完成，DOM 未生成（适合接口请求）

mounted：DOM 挂载完成（可操作 DOM 或初始化插件）

updated：数据更新导致 DOM 重新渲染后触发

destroyed：组件销毁时清理定时器或事件监听

五、Vue Router 路由管理

通过 vue-router 实现单页面应用（SPA）的路由跳转：

javascript

const routes = [ { path: '/home', component: Home }, { path: '/user/:id', component: User }];const router = new VueRouter({ routes });

使用 <router-link to="/home"> 导航，<router-view> 渲染匹配组件。

六、Vuex 状态管理

复杂应用中，使用 Vuex 集中管理全局状态：

State：存储数据

Mutations：同步修改状态（通过 commit 调用）

Actions：处理异步逻辑，提交 Mutations（通过 dispatch 调用）

Getters：计算派生状态

javascript

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }});

七、总结

Vue2 以易用性和灵活性著称，适合快速构建中小型项目。其核心优势包括：

响应式数据绑定，减少手动 DOM 操作

组件化开发，提升代码复用性

丰富的生态工具（如 Vue CLI、Vue Devtools）

尽管 Vue3 已发布，但 Vue2 仍是维护现有项目的可靠选择。掌握本文核心内容后，可进一步探索自定义指令、混入（mixins）等高级特性，开启高效开发之旅！

推荐阅读更多精彩内容