掌握 Vue 2：详细介绍与快速上手 – wiki基地

作者： /

掌握 Vue 2：详细介绍与快速上手

引言

在当今的前端开发领域，JavaScript 框架层出不穷，但 Vue.js 凭借其渐进式、易用、高效等特性，迅速崛起并占据了重要的地位。特别是 Vue 2 版本，在其生命周期中积累了庞大的社区、丰富的生态和海量的项目实践。尽管 Vue 3 带来了 Composition API 和性能上的诸多改进，但全球范围内仍有大量的生产环境应用运行在 Vue 2 上，并且维护和开发新功能的需求依然旺盛。因此，深入理解和掌握 Vue 2，不仅是维护现有项目的必备技能，也是学习 Vue 3 的坚实基础。

本文将带领你详细探索 Vue 2 的核心概念、设计思想，并通过一个快速上手的实践环节，让你迅速构建起第一个 Vue 2 应用。无论你是前端新手，还是希望从其他框架转型，本文都将为你提供一个全面而深入的学习路径。

第一部分：Vue 2 详细介绍 – 理解核心概念

Vue 2 被称为一个“渐进式框架”，这意味着你可以根据项目的需求，逐步采用 Vue 的不同功能。它可以仅仅用于增强现有 HTML 的交互性，也可以用于构建复杂的单页面应用（SPA）。这种灵活性是 Vue 2 受到欢迎的重要原因之一。

1. 渐进式框架的含义

渐进式意味着你可以从一个简单的 <script> 标签引入开始，只使用 Vue 的声明式渲染和组件系统，逐渐深入到使用 Vue Router 进行路由管理、使用 Vuex 进行状态管理，最终构建一个完整的 SPA。这使得 Vue 2 的学习曲线相对平缓，上手门槛较低。

2. 核心特性概览

Vue 2 的核心特性包括：

  • 声明式渲染 (Declarative Rendering): 基于模板语法，将数据声明式地渲染到 DOM。你只需要关注数据的变化，Vue 会自动更新视图。
  • 响应式系统 (Reactivity System): 当数据模型发生变化时，视图会自动更新。Vue 2 基于 Object.defineProperty 实现了细粒度的响应式。
  • 组件系统 (Component System): 允许你将 UI 拆分成独立、可复用的组件，每个组件包含自己的模板、脚本和样式。
  • 指令 (Directives): 带有 v- 前缀的特殊 attribute，用于在模板中应用响应式的行为到 DOM。
  • 计算属性 (Computed Properties) 和侦听器 (Watchers): 方便处理复杂的模板逻辑和响应数据变化执行异步操作。
  • 生命周期钩子 (Lifecycle Hooks): 在组件实例化的不同阶段提供钩子函数，允许你在特定时机执行代码。
  • 生态系统 (Ecosystem): 丰富的官方库和第三方工具，如 Vue Router (路由), Vuex (状态管理), Vue CLI (项目构建), DevTools (开发调试工具) 等。

3. 声明式渲染与模板语法

Vue 2 使用基于 HTML 的模板语法。你可以直接在 HTML 文件中使用 Vue 的特性，或者在单文件组件（.vue 文件）中使用 <template> 块。

  • 插值 (Interpolations): 使用双大括号 {{ }} 将 JavaScript 表达式嵌入到文本中。
    html
    <span>Message: {{ msg }}</span>
  • 指令 (Directives): 以 v- 开头，用于绑定数据到 DOM 元素的属性、改变 DOM 结构或侦听事件。
    • v-bind (简写 :): 动态绑定属性。
      html
      <img v-bind:src="imageUrl">
      <a :href="linkUrl">Link</a>
    • v-on (简写 @): 绑定事件监听器。
      html
      <button v-on:click="handleClick">Click Me</button>
      <input @input="handleInput">
    • v-if, v-else-if, v-else, v-show: 条件渲染元素。v-if 切换时会销毁/重建元素，v-show 切换时仅仅是改变 CSS 的 display 属性。
      html
      <p v-if="isVisible">Now you see me</p>
      <p v-else>Now you don't</p>
    • v-for: 循环渲染列表。需要提供一个 :key 属性以帮助 Vue 跟踪每个节点的身份，从而优化更新性能。
      html
      <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
      </ul>
    • v-model: 在表单输入元素上创建双向数据绑定。
      html
      <input v-model="message">

4. 响应式系统 (Object.defineProperty)

Vue 2 的核心魔术之一是其响应式系统。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项时，Vue 会遍历这个对象的属性，并使用 Object.defineProperty 把它们转换成 getter/setter。当这些属性被访问时，getter 会收集依赖（即哪个地方使用了这个数据）；当属性被修改时，setter 会通知所有依赖它的地方更新视图。

Vue 2 响应式注意事项：

  • 对于对象，Vue 2 无法检测到属性的添加或删除。
    javascript
    // bad
    this.myObject.newProperty = 'value';
    // good
    this.$set(this.myObject, 'newProperty', 'value');
    // or
    this.myObject = Object.assign({}, this.myObject, { newProperty: 'value' });
  • 对于数组，Vue 2 无法检测到通过索引直接设置元素或修改数组长度。
    javascript
    // bad
    this.myArray[indexOfItem] = newValue;
    this.myArray.length = newLength;
    // good
    this.$set(this.myArray, indexOfItem, newValue);
    // or use mutable methods like push, pop, shift, unshift, splice, sort, reverse
    this.myArray.push(newValue);
    理解这些限制对于在 Vue 2 中正确地处理数据变化至关重要。

5. 计算属性 (Computed) 与侦听器 (Watch)

  • 计算属性 (Computed): 用于处理在模板中需要进行复杂逻辑计算后才能显示的数据。它们基于它们的依赖进行缓存，只有当依赖的数据发生变化时，计算属性才会重新计算。这使得它们比在模板中直接使用方法更高效。
    javascript
    computed: {
    reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('');
    },
    fullName: {
    // getter
    get: function () {
    return this.firstName + ' ' + this.lastName;
    },
    // setter (optional)
    set: function (newValue) {
    var names = newValue.split(' ');
    this.firstName = names[0];
    this.lastName = names[names.length - 1];
    }
    }
    }
    在模板中使用时就像普通数据属性一样：{{ reversedMessage }}。

  • 侦听器 (Watch): 用于观察一个响应式属性的变化，并在它变化时执行一些副作用操作，例如异步操作或开销较大的操作。当你需要在数据变化时执行一些特定的、复杂的逻辑，并且这些逻辑不需要产生一个新的响应式数据时，可以使用侦听器。
    javascript
    watch: {
    question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...';
    this.debounceGetAnswer(); // 调用一个防抖函数来执行异步操作
    }
    },
    methods: {
    getAnswer: function () {
    // 执行异步操作，比如发起一个 AJAX 请求
    },
    debounceGetAnswer: _.debounce(
    function () {
    this.getAnswer();
    },
    500
    ) // 引入 lodash 或自行实现防抖
    }
    理解 computed 和 watch 的区别非常重要：computed 用于计算并返回一个派生值，依赖会被缓存；watch 用于执行响应数据变化的副作用操作，没有缓存。

6. Vue 实例与生命周期

每个 Vue 应用都是通过创建一个新的 Vue 实例来启动的：

javascript
var vm = new Vue({
// options
});

Vue 实例在被创建时，会经过一系列的初始化过程，例如设置数据监听、编译模板、挂载实例到 DOM 等。这些过程中的不同阶段提供了被称为“生命周期钩子”的函数，允许你在特定时机执行自定义逻辑。

常见的生命周期钩子：

  • beforeCreate: 实例刚刚被创建，数据观测 (data observation) 和事件机制尚未初始化。
  • created: 实例已经创建完成，数据观测和事件机制已初始化，但尚未挂载到 DOM。你可以在这里访问 data 和 methods，常用于异步数据请求。
  • beforeMount: 在挂载之前，模板已经编译或渲染函数已经就绪，但尚未挂载到 DOM。
  • mounted: 实例已经被挂载到 DOM。你可以在这里访问 DOM 元素，常用于集成第三方库或执行依赖 DOM 的操作。
  • beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated: 数据更新后虚拟 DOM 重新渲染和打补丁之后调用。避免在这里修改状态，可能导致无限循环更新。
  • beforeDestroy: 实例销毁之前调用。实例仍然完全可用。常用于清理定时器、解绑事件监听器等。
  • destroyed: 实例销毁之后调用。Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

理解这些钩子的执行顺序和用途，对于管理组件的生命周期和资源非常重要。

7. 组件系统

组件是 Vue 2 最强大的功能之一。它们是可复用的 Vue 实例，包含自己的模板、脚本和样式。组件的出现使得复杂的用户界面可以被分解成更小、更易于管理的部分。

  • 定义组件:

    • 全局注册:
      javascript
      Vue.component('my-component', {
      template: '<div>A custom component!</div>'
      // ... data, methods, computed, etc.
      });
      // 然后在任何 Vue 实例的模板中使用 <my-component></my-component>

    • 局部注册 (推荐): 在组件或 Vue 实例的 components 选项中注册。
      “`javascript
      import MyComponent from ‘./MyComponent.vue’; // 假设是单文件组件

      export default {
      components: {
      MyComponent // 局部注册
      },
      // …
      }
      * **Props (属性):** 父组件向子组件传递数据。Props 是单向数据流的，子组件不应该直接修改接收到的 prop。javascript
      // ChildComponent.vue
      export default {
      props: {
      title: String, // 定义 prop 的类型
      count: {
      type: Number,
      default: 0, // 定义默认值
      required: true, // 定义是否必须
      validator: function (value) { // 自定义校验函数
      return value >= 0
      }
      }
      },
      template: ‘

      {{ title }} – {{ count }}

      ‘
      }

    // ParentComponent.vue

    * **Events (事件):** 子组件向父组件通信。子组件可以通过 `$emit` 方法触发一个自定义事件，父组件可以使用 `v-on` (或 `@`) 监听这个事件。javascript
    // ChildComponent.vue

    // ParentComponent.vue

    methods: {
    handleMyEvent(data) {
    console.log(‘Event received with data:’, data);
    }
    }
    * **Slots (插槽):** 允许父组件将内容分发到子组件的模板中。javascript
    // LayoutComponent.vue

    // ParentComponent.vue

    This is the main content.




    “`

8. 单文件组件 (.vue)

单文件组件 (.vue 文件) 是构建复杂 Vue 应用的标准方式。它将组件的模板 (<template>), 脚本 (<script>), 和样式 (<style>) 封装在一个文件中，提供了更好的组织性和可维护性。通常需要构建工具 (如 Webpack, Parcel) 来处理 .vue 文件。Vue CLI 就是基于 Webpack 或 Parcel 构建 .vue 文件的。

9. Vue Router (路由)

对于单页面应用 (SPA)，我们需要根据 URL 路径切换不同的视图。Vue Router 是 Vue 的官方路由管理器，它与 Vue.js 深度集成，使得构建单页面应用变得轻而易举。

核心概念：

  • 路由映射 (Route Mapping): 将 URL 路径映射到组件。
  • <router-view>: 路由匹配到的组件将渲染在这里。
  • <router-link>: 用于导航链接，会被渲染成 <a> 标签，但可以阻止浏览器默认的页面重载行为。

“`javascript
// router/index.js
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import Home from ‘../views/Home.vue’;
import About from ‘../views/About.vue’;

Vue.use(VueRouter);

const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: About
}
];

const router = new VueRouter({
routes
});

export default router;

// main.js
import Vue from ‘vue’;
import App from ‘./App.vue’;
import router from ‘./router’;

new Vue({
router, // 将 router 实例注入到 Vue 根实例
render: h => h(App)
}).$mount(‘#app’);

// App.vue

“`

10. Vuex (状态管理)

随着应用的增长，组件之间共享状态会变得复杂。Vuex 是 Vue 的官方状态管理模式，它提供了一个集中式的存储，用于管理所有组件的状态，并以可预测的方式改变状态。Vuex 的核心是 Flux 或 Redux 架构在 Vue 中的实现。

核心概念：

  • State: 应用的状态树。
  • Getters: 从 State 派生的状态，类似于 Vue 组件的计算属性。
  • Mutations: 唯一允许改变 State 的方式，必须是同步函数。通过 commit 调用。
  • Actions: 可以包含任意异步操作，通过 dispatch 调用。Actions 会提交 Mutations 来改变 State。
  • Modules: 将 Store 分割成模块，每个模块拥有自己的 State, Getters, Mutations, Actions。

“`javascript
// store/index.js
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++; // 直接修改 state (同步)
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit(‘increment’); // 提交 mutation (异步)
}, 1000);
}
},
// modules: {}
});

// Component Usage

“`

Vuex 提供了一个明确的状态管理模式，使得应用的状态变化可追踪、可调试。

11. 生态与工具

Vue 2 拥有成熟的生态系统：

  • Vue CLI: 标准的项目脚手架，提供开箱即用的开发环境，支持 Babel, Webpack, ESLint 等。
  • Vue DevTools: 浏览器开发者工具扩展，提供了强大的组件检查、状态跟踪、路由和事件监控等功能，是 Vue 开发必备神器。
  • 各种 UI 组件库: Element UI, Ant Design Vue, Vant 等，加速开发速度。
  • 测试工具: Vue Test Utils。

第二部分：Vue 2 快速上手 – 构建你的第一个应用

现在，我们通过 Vue CLI 快速搭建一个 Vue 2 项目，并实现一个简单的功能。

1. 准备工作

确保你的开发环境已安装 Node.js (推荐 LTS 版本) 和 npm 或 Yarn。

“`bash
node -v # 检查 Node.js 版本
npm -v # 检查 npm 版本

或

yarn -v # 检查 Yarn 版本
“`

2. 安装 Vue CLI

如果你之前没有安装过 Vue CLI，或者希望更新到最新版本，请全局安装：

“`bash
npm install -g @vue/cli

或

yarn global add @vue/cli
“`

安装完成后，你可以通过 vue --version 命令检查版本。

3. 创建一个新项目

打开终端，切换到你想创建项目的目录，然后运行：

bash
vue create my-vue2-app

Vue CLI 会启动一个交互式向导。对于 Vue 2 的学习和快速上手，你可以选择“Manually select features” (手动选择特性)，然后选择以下选项：

  • Babel: 确保代码兼容性。
  • Router: 用于单页面应用路由。
  • Vuex: 用于状态管理。
  • Linter / Formatter: 代码风格检查和格式化 (推荐使用 ESLint + Prettier)。
  • CSS Pre-processors: 如果你需要使用 Less, Sass, Stylus 等 (可选)。

选择这些特性后，CLI 会询问你一些配置问题，例如：

  • Use history mode for router? (Y/n): 推荐选择 Y 使用 HTML5 History 模式 (更漂亮的 URL)。
  • Pick a Linter / Formatter config: 选择一个你喜欢的配置 (比如 ESLint + Prettier)。
  • Pick additional lint features: 选择在保存时或提交时进行 Lint/Fix。
  • Where do you prefer placing config for Babel, ESLint, etc.? (In dedicated config files/In package.json): 推荐选择 In dedicated config files。
  • Save this as a preset for future projects? (y/N): 如果你经常使用这个配置，可以选择 y 保存为预设。

选择完成后，CLI 会自动安装所需的依赖。这个过程可能需要几分钟。

4. 项目结构概览

项目创建并安装依赖完成后，进入项目目录：

bash
cd my-vue2-app

项目目录结构大致如下：

my-vue2-app/
├── node_modules/ # 项目依赖库
├── public/ # 静态资源目录，例如 index.html, favicon.ico
│ └── index.html # 应用的入口 HTML 文件
├── src/ # 应用源码目录
│ ├── assets/ # 静态资源（通过模块打包工具处理）
│ ├── components/ # 可复用组件
│ │ └── HelloWorld.vue
│ ├── router/ # Vue Router 配置
│ │ └── index.js
│ ├── store/ # Vuex Store 配置
│ │ └── index.js
│ ├── views/ # 页面组件 (通常对应路由)
│ │ ├── Home.vue
│ │ └── About.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件，创建 Vue 实例并挂载
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置
├── .eslintrc.js # ESLint 配置
├── package.json # 项目配置和依赖管理
├── README.md
└── vue.config.js # Vue CLI 配置 (如果需要自定义)

5. 运行项目

在项目根目录，运行开发服务器：

“`bash
npm run serve

或

yarn serve
“`

CLI 会启动一个本地服务器，通常在 http://localhost:8080/。打开浏览器访问这个地址，你将看到 Vue CLI 提供的默认欢迎页面。

6. 探索代码

  • public/index.html: 这是应用的入口 HTML 文件。里面只有一个简单的 <div id="app"></div>，Vue 应用会挂载到这个元素上。

  • src/main.js: 这是应用的入口 JavaScript 文件。它做了几件事：

    • 引入 Vue 库。
    • 引入根组件 App.vue。
    • 引入 router 和 store (如果选择了)。
    • 创建 Vue 实例，并将 router 和 store 注入，然后通过 render 函数渲染 App 组件，最后 $mount('#app') 将实例挂载到 index.html 中的 #app 元素。
      “`javascript
      import Vue from ‘vue’;
      import App from ‘./App.vue’;
      import router from ‘./router’;
      import store from ‘./store’;

    Vue.config.productionTip = false;

    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount(‘#app’);
    ``
    * **    src/App.vue:** 这是应用的根组件。它包含一个导航 () 和一个路由视图 ()。当路由变化时，对应的页面组件会在中渲染。
    * **    src/views/Home.vue和src/views/About.vue:** 这是两个简单的页面组件，通过路由进行切换。Home.vue可能包含了HelloWorld.vue组件。
    * **    src/components/HelloWorld.vue:** 这是一个简单的子组件，接收一个msgprop 并显示它。这是一个很好的例子，展示了组件的