全面解析 Vue 2：新手必看 – wiki基地

作者： /

全面解析 Vue 2：新手必看

引言：欢迎来到 Vue.js 的世界！

前端开发的世界日新月异，各种框架和库层出不穷。在众多选择中，Vue.js 凭借其易学易用、灵活高效的特性，赢得了全球开发者（尤其是中国开发者）的广泛喜爱。尽管 Vue 3 已经发布，但 Vue 2 仍然拥有庞大的用户基础和大量的成熟项目。对于新手来说，从 Vue 2 入手，打下坚实的基础，无疑是一个非常明智的选择。

本文将带你全面深入地了解 Vue 2 的核心概念和基本用法，为你打开 Vue.js 的大门。无论你之前是否有前端框架的使用经验，本文都将尽力为你提供清晰、详尽的指导。准备好了吗？让我们一起踏上 Vue 2 的学习之旅！

第一部分：什么是 Vue.js？为什么选择 Vue 2？

1. 什么是 Vue.js？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

  • 渐进式框架： 这意味着你可以根据项目需求，逐步地使用 Vue 的不同功能。你可以只使用 Vue 的核心库来实现声明式渲染和组件化，也可以配合官方提供的路由（Vue Router）、状态管理（Vuex）、构建工具（Vue CLI）等一系列附属库来构建更复杂、更大规模的应用。这种灵活性是 Vue 的一大优势。
  • 用户界面： Vue 的核心聚焦在视图层，也就是我们看到和与之交互的网页部分。它通过数据驱动的方式，让我们更高效、更便捷地管理和更新页面上的数据和结构。

Vue 的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合式的视图组件。

2. 为什么选择 Vue 2？

尽管 Vue 3 带来了许多改进，但 Vue 2 依然是学习和使用的重要版本。选择 Vue 2 的理由有很多：

  • 庞大的用户基础和社区： Vue 2 已经存在多年，积累了大量的用户、成熟的社区和丰富的资源。这意味着你在学习和开发过程中遇到问题时，很容易找到答案和帮助。
  • 成熟稳定的生态系统： Vue Router、Vuex 以及各种第三方库在 Vue 2 上都经过了充分的验证和优化，拥有非常成熟的解决方案。
  • 海量的项目案例： 许多公司和项目仍然在使用 Vue 2。学习 Vue 2 意味着你可以更容易地参与到这些项目中。
  • 易于理解的 API： 相较于其他一些框架，Vue 2 的核心 API 设计直观、易于理解，非常适合新手入门。其 Options API 的方式组织代码，逻辑清晰，符合大多数传统面向对象或配置式编程的思维习惯。
  • 高性能： 尽管 Vue 3 在性能上有提升，但 Vue 2 在大多数应用场景下也表现出色，尤其是在视图渲染和更新方面。

总而言之，学习 Vue 2 可以让你快速掌握前端框架的核心思想，为将来学习 Vue 3 或其他框架打下坚实的基础。

第二部分：迈出第一步——安装与初体验

学习任何一个框架，第一步总是如何把它跑起来。对于 Vue 2，最简单的方式是通过 CDN 引入，你甚至不需要安装任何东西！

1. 使用 CDN 引入

创建一个简单的 HTML 文件（例如 index.html），然后将以下代码复制进去：

“`html




我的第一个 Vue 2 应用



{{ message }}


“`

用浏览器打开这个 index.html 文件，你就会看到页面上显示 “你好，Vue 2！”。

代码解析：

  • 我们通过 <script> 标签引入了 Vue 2 的库文件。vue.js 是开发版本，包含完整的警告和调试功能，适合学习和开发。
  • 我们在 HTML 中创建了一个 id 为 app 的 <div> 元素。这是 Vue 实例将要控制的区域。
  • 在第二个 <script> 标签中，我们使用 new Vue({}) 创建了一个 Vue 实例。
    • el: '#app' 选项告诉 Vue 实例要挂载到 id 为 app 的元素上。
    • data: { message: '你好，Vue 2！' } 选项定义了应用的数据。message 是一个属性，其值为 ‘你好，Vue 2！’。
  • 在 <div> 内部，我们使用了 {{ message }}。这是 Vue 的模板语法，用于将 data 中的 message 属性的值渲染到页面上。

现在，尝试在浏览器的开发者工具中，找到 <script> 标签中的 app 变量（如果定义在全局作用域），然后修改 app.message 的值，例如输入 app.message = 'Vue 2 真棒！' 并按回车。你会惊喜地发现，页面的内容立刻变成了 “Vue 2 真棒！”。这就是 Vue 的响应式特性！

2. 更规范的方式：通过构建工具 (Vue CLI)

对于更复杂的项目，通常会使用 Node.js 生态中的构建工具，例如 Webpack 或 Parcel，配合 Vue CLI (命令行工具) 来创建和管理项目。Vue CLI 会帮你设置好项目的结构、打包、热重载等一系列开发所需的环境。

安装 Vue CLI：

“`bash
npm install -g @vue/cli

或使用 yarn

yarn global add @vue/cli

“`

创建一个新的 Vue 2 项目：

bash
vue create my-vue2-app

在创建过程中，你需要选择 Vue 2 的预设。创建完成后，进入项目目录并启动开发服务器：

“`bash
cd my-vue2-app
npm run serve

或 yarn serve

“`

这会启动一个本地服务器，你可以在浏览器中访问你的应用。

注意： 对于新手入门，CDN 方式足以让你理解 Vue 2 的核心原理。等你熟悉了基础概念后，再转向 Vue CLI 进行更规范的项目开发会更有效率。本文的后续内容主要基于核心概念的讲解，不强制要求使用 Vue CLI。

第三部分：Vue 2 的核心概念

理解 Vue 2 的核心概念是掌握它的关键。我们将详细介绍它们。

1. Vue 实例 (Vue Instance)

每个 Vue 应用都是通过创建一个新的 Vue 实例开始的。正如我们上面看到的：

javascript
var vm = new Vue({
// 选项对象
})

这里的 vm 是一个 Vue 实例，它会控制 el 指定的 DOM 元素及其子元素。vm 经常被称为 ViewModel，这也是 MVVM（Model-View-ViewModel）设计模式中 ViewModel 的体现。

创建 Vue 实例时，你需要传入一个选项对象，用于配置实例的行为，例如：

  • el: 挂载点，指定 Vue 实例控制哪个 DOM 元素。
  • data: 应用的数据。
  • methods: 应用的方法。
  • computed: 计算属性。
  • watch: 侦听器。
  • components: 注册局部组件。
  • lifecycle hooks: 生命周期钩子函数，如 created, mounted 等。

等等… 我们接下来会详细介绍一些常用的选项。

2. 模板语法 (Template Syntax)

Vue 使用一种基于 HTML 的模板语法，允许你声明式地将数据渲染进 DOM。

  • 文本插值 (Text Interpolation):
    使用双大括号 {{ }} 将数据绑定到文本。前面已见过示例。
    html
    <p>消息：{{ message }}</p>
    大括号内可以是任何有效的 JavaScript 表达式。
    html
    <p>计算结果：{{ 1 + 2 }}</p>
    <p>反转消息：{{ message.split('').reverse().join('') }}</p>

  • 指令 (Directives):
    指令是带有 v- 前缀的特殊 attribute。它们向 Vue 提供了一些特殊的行为。

    • v-bind: 动态绑定一个或多个 attribute，或一个组件 prop 到表达式。
      缩写：:
      html
      <a v-bind:href="url">链接</a>
      <!-- 缩写 -->
      <img :src="imgUrl">
      <!-- 绑定 class 和 style -->
      <div :class="{ active: isActive, 'text-danger': hasError }" :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
      这里，href 属性的值不再是固定的字符串，而是 data 中 url 变量的值。当 url 改变时，href 也会自动更新。

    • v-if, v-else-if, v-else: 条件渲染，根据表达式的布尔值来决定是否渲染元素。
      “`html

      欢迎回来！

      请先登录。

      A
      B
      C

      ``v-if` 是“惰性的”，当条件为假时，它不会渲染元素；当条件为真时，它才会开始渲染。

    • v-show: 条件渲染，根据表达式的布尔值来决定元素的 display CSS 属性。
      html
      <p v-show="isLoading">加载中...</p>
      v-show 总是会渲染元素，只是通过 CSS 控制其显示或隐藏。如果需要频繁切换元素的显示/隐藏，v-show 的性能通常优于 v-if。

    • v-for: 列表渲染，基于源数据多次渲染元素或模板块。
      “`html

      • {{ item.text }}

      • {{ index }} – {{ item.text }}

      {{ index }}. {{ key }}: {{ value }}

      ``v-for遍历数组或对象。key` attribute 是可选但强烈推荐的，它帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素，提高渲染效率。

    • v-on: 监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
      缩写：@
      html
      <button v-on:click="handleClick">点击我</button>
      <!-- 缩写 -->
      <input @input="handleInput" :value="text">
      事件处理方法通常定义在 Vue 实例的 methods 选项中。

    • v-model: 在表单输入和应用状态之间创建双向绑定。
      “`html

      {{ message }}

      选中：{{ selected }}

      ``v-model是v-bind:value和v-on:input` 的语法糖。它使得表单数据的处理变得非常方便。

3. 数据响应式 (Data Reactivity)

这是 Vue 最核心的特性之一。当你修改了 Vue 实例 data 中的数据时，视图会自动更新以反映这些变化。

在 Vue 2 中，当你将一个普通 JavaScript 对象传给 data 选项时，Vue 会遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 转换成 getter/setter。这些 getter/setter 使得 Vue 能够追踪依赖，在 property 被访问或修改时通知变化。

重要限制：

  • Vue 2 的响应式系统不能侦测对象属性的添加或删除。如果你在 Vue 实例创建之后添加新的属性到 data 对象上，这些新属性将不是响应式的。要解决这个问题，可以使用 Vue.set(object, propertyName, value) 或 vm.$set(object, propertyName, value) 方法。
    “`javascript
    // 假设 data 中有一个对象 user = { name: ‘Alice’ }
    // 这样添加的 age 不是响应式的
    // vm.user.age = 30;

    // 正确的做法
    Vue.set(vm.user, ‘age’, 30);
    // 或者 vm.$set(vm.user, ‘age’, 30);
    * Vue 2 也**不能侦测数组通过索引直接修改元素**（例如 `arr[index] = newValue`）或**修改数组长度**（例如 `arr.length = newLength`）时的变化。要解决这个问题，可以使用 Vue 包装过的数组方法（如 `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`），或者使用 `Vue.set(array, index, value)` 或 `vm.$set(array, index, value)`。javascript
    // 假设 data 中有一个数组 list = [‘a’, ‘b’]
    // 这样修改不是响应式的
    // vm.list[0] = ‘c’;
    // vm.list.length = 1;

    // 正确的做法
    vm.list.splice(0, 1, ‘c’); // 使用 splice 替换元素
    Vue.set(vm.list, 0, ‘c’); // 或者使用 Vue.set/vm.$set

    vm.list.splice(1); // 使用 splice 修改长度
    “`

理解这些限制对于避免潜在的 bug 非常重要。

4. 计算属性 (Computed Properties)

当模板中的表达式变得复杂时，它们会变得难以维护。计算属性可以让你通过声明的方式创建一个依赖于其他响应式数据的新属性。

计算属性是基于它们的响应式依赖进行缓存的。只有当它们依赖的数据发生改变时，计算属性才会重新求值。

javascript
new Vue({
el: '#app',
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
// 一个计算属性的 getter
fullName: function () {
// `this` 指向 vm 实例
return this.firstName + ' ' + this.lastName
}
}
})

“`html

全名：{{ fullName }}

“`

当 firstName 或 lastName 改变时，fullName 会自动更新。在模板中，你可以像访问普通属性一样访问 fullName。

计算属性 vs. 方法 (Methods):

  • 计算属性是基于它们的依赖缓存的。一个计算属性只有在它的相关依赖发生改变时才会重新求值。
  • 方法则没有缓存。每当包含它的组件被重新渲染时，方法都会被调用。

如果你的逻辑不涉及数据依赖，或者你需要在每次访问时都执行，那么使用方法更合适。如果你的逻辑依赖于响应式数据，并且希望有缓存，应该使用计算属性。

5. 侦听器 (Watchers)

虽然计算属性适用于声明性地转换数据，但有时我们需要在数据变化时执行一些“副作用”操作，比如异步操作或开销较大的操作。这时候，侦听器 (watch) 会更有用。

javascript
new Vue({
el: '#app',
data: {
question: ''
},
watch: {
// 每当 question 发生变化时，这个函数就会执行
question: function (newQuestion, oldQuestion) {
console.log('问题变化了：', oldQuestion, '->', newQuestion);
this.answer = '等待输入...';
this.getAnswer(); // 调用一个方法来获取答案
}
},
methods: {
getAnswer: _.debounce( // 使用 lodash 的 debounce 来限制请求频率
function () {
if (this.question.indexOf('?') === -1) {
this.answer = '问题必须包含一个问号！';
return;
}
this.answer = '查询中...';
var vm = this;
axios.get('https://yesno.wtf/api') // 假设使用 axios 进行异步请求
.then(function (response) {
vm.answer = _.capitalize(response.data.answer);
})
.catch(function (error) {
vm.answer = '出错了！' + error;
});
},
500 // 在用户停止输入后 500ms 再执行
)
}
})

watch 选项接收一个对象，其中的 key 是要侦听的 data 属性，value 是一个回调函数。当被侦听的属性变化时，回调函数会被调用，并接收新值和旧值作为参数。

侦听器在需要在数据变化时执行异步或开销较大的操作时非常有用，因为它允许你执行更复杂的逻辑。但在多数情况下，计算属性是更推荐的方式，因为它更简洁且有缓存。

6. 生命周期钩子 (Lifecycle Hooks)

每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如，它需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时，它也会运行一些叫做生命周期钩子的函数。

这些钩子函数让你有机会在实例生命周元的特定阶段运行自己的代码。常用的钩子有：

  • beforeCreate: 实例刚刚在内存中被创建出来，数据和方法都还没有初始化。
  • created: 实例已经完成数据观测 (data observer) 和 property、方法的初始化。此时可以访问 data 中的数据和 methods 中的方法，但 DOM 还没有被渲染或挂载。
  • beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
  • mounted: 实例被挂载后调用，此时 DOM 已经被渲染出来，可以进行 DOM 操作。
  • beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated: 视图更新后调用，DOM 已经重新渲染和打补丁。
  • beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed: 实例销毁之后调用。这时，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

你可以在 Vue 实例选项中添加这些钩子：

javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
created: function () {
// `this` 指向 vm 实例
console.log('实例已创建：', this.message);
},
mounted: function () {
console.log('DOM 已挂载');
// 可以在这里进行 DOM 操作，例如 this.$el
},
beforeDestroy: function () {
console.log('实例即将销毁');
// 可以在这里进行一些清理工作，如清除定时器
}
})

理解生命周期钩子可以帮助你在正确的时机执行代码，例如在 created 中获取初始数据，在 mounted 中进行 DOM 相关的操作等。

7. 组件系统 (Component System)

组件是 Vue 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。一个大型应用可以被组织成可嵌套的、带有各自独立状态和行为的组件树。

想象一下一个网页，它可以分解成头部、侧边栏、内容区域、列表项等等。每一个部分都可以看作是一个组件。

定义一个全局组件：

“`javascript
// 在创建 Vue 根实例之前定义
Vue.component(‘my-component’, {
data: function () {
return {
count: 0
}
},
template: ‘‘
})

// 创建根实例
new Vue({ el: ‘#app’ })
“`

在 HTML 中使用组件：

“`html


“`

每个组件都是一个独立的 Vue 实例，它们有自己的 data、methods、computed 等。组件的 data 必须是一个函数，这样每个组件实例都会维护一份独立的数据副本，避免数据污染。

父子组件通信 (简述):

  • Props： 父组件通过 Props 向子组件传递数据。子组件需要在 props 选项中声明接收哪些 prop。
  • Custom Events： 子组件可以通过 $emit 方法触发自定义事件，父组件通过 v-on 监听这些事件来接收子组件发出的消息。

javascript
// 父组件（在某个 Vue 实例或组件中）
new Vue({
el: '#app',
data: {
parentMsg: 'Hello from parent'
},
components: {
'child-component': {
props: ['message'], // 声明接收 message prop
template: `
<div>
<p>父组件传来的消息：{{ message }}</p>
<button @click="$emit('child-event', 'Hello from child')">触发子组件事件</button>
</div>
`
}
}
})

“`html


@child-event=”handleChildEvent”
>

“`

组件化是构建大型复杂应用的基础，它提高了代码的可维护性和复用性。

第四部分：进阶与未来

掌握了 Vue 2 的核心概念后，你已经可以开始构建一些简单的应用了。要深入学习并应用到更复杂的项目，你还需要了解：

  • 单文件组件 (Single File Components – SFCs): 在 .vue 文件中将模板 (template)、脚本 (script) 和样式 (style) 写在一起，是 Vue 项目开发中最常用的方式，需要构建工具支持。
  • Vue CLI: 用于快速搭建大型 Vue 项目的官方脚手架工具。
  • Vue Router: 官方路由管理器，用于构建单页应用 (SPA)。
  • Vuex: 官方状态管理模式库，用于管理大规模应用中的共享状态。
  • Server-Side Rendering (SSR): 服务器端渲染，用于提升首屏加载速度和 SEO。
  • 测试: 组件测试、端到端测试等。
  • TypeScript 支持: 在 Vue 2 中使用 TypeScript。

随着你对 Vue 2 的深入，你会发现它的生态系统非常完善，能够满足各种复杂项目的需求。同时，学习 Vue 2 的经验也能很好地迁移到 Vue 3，因为许多核心思想是相通的。

结论

恭喜你！通过阅读本文，你已经对 Vue 2 的核心概念有了全面的了解：从它的定义、优势，到如何开始第一个应用，再到响应式系统、模板语法、指令、计算属性、侦听器、生命周期钩子以及组件系统。

Vue 2 是一个功能强大且非常友好的前端框架。它的设计哲学和易用性使得学习曲线相对平缓，非常适合新手入门。

学习框架最重要的一步是实践。现在，是时候动手写代码了！尝试使用本文介绍的概念，修改示例代码，构建自己的小项目。在实践中遇到的问题会促使你更深入地思考和学习。

前端世界充满乐趣，Vue.js 是一个值得你投入时间去掌握的工具。祝你在 Vue 2 的学习和开发之路上一切顺利！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部