Vue 简介 - 技术栈

好多新手不知道如何学习 Vue，或者说不知道如何把 Vue 应用到工作当中，毕竟不是所有人都有工作经验。本文适合大学生、无工作经验的人士阅读。大神请指点。

我一直在使用 Vue2，最近失业在家，正好学习一下 Vue3。诸君共勉。

什么是 Vue?

学习一门语言，最好的入门肯定不能放过官方文档。我们先看一下官方文档是如何定义 Vue 的。

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

在这里肯定有人对一些词汇感觉到陌生，比如"框架"、"声明式"、"组件化"。

框架，说白了就是别人写的代码，但是它比较通用，你可以直接使用。为什么你要使用他人的框架呢？因为省时省力，提高了代码健壮性，开发效率高。

比如我们拿上一代的神仙级框架 jQuery 举例。如果你想要选择一个元素myId的兄弟元素，原生写法如下：

js 复制代码

document.getElementById('#myId').nextElementSibling

jQuery 写法如下：

js 复制代码

$('#myId').next()

是不是代码一下子就清爽了不少？这些只是最简单最基本的，当你业务复杂后，框架的好处就体现更大了。在这里，jQuery就是框架。相信什么是框架，大家可以容易理解，我就不再赘述了。

声明式，这个应该是疑惑最多的一个词了。声明式是与命令式相对的。从定义中可知，Vue 作为一种声明式框架，那什么是命令式框架呢？我们举例说明如下：

html 复制代码

<div id="app">
  /* 2. 段落的内容为 message 的值，也就是 Hello Vue! */
  <p>{{ message }}</p>
</div>

js 复制代码

const app = new Vue({
  el: '#app',
  data: {
    // 1. 设置 message 为字符串 Hello, Vue!
    message: 'Hello, Vue!'
  }
})

如上就是基于 Vue 的声明式用法，设置段落内容为 "Hello, Vue!"。在这里我们就是设置变量 message 的内容为 "Hello, Vue!"，然后在 html 中引用一下。框架会自动把 message 的内容替换为我们设置的值。具体它是如何设置的，这是框架内部的实现细节，我们不需要关心，只要会使用即可。

下面来看一下命令式如何实现相同的功能。

html 复制代码

<div id="app">
  <p id="message"></p>
</div>

js 复制代码

// 1. 首先获取要设置的段落
const paragraph=document.getElementById('#message');

// 2. 设置段落内容
paragraph.textContent='Hello JavaScript'

命令式代码，你就要告诉代码每一步是如何实现的，而声明式代码只需要告诉它最后结果就可以了。这就是两者的不同。

当然，我以上举例很简单，你可能看不出差别，但随着业务复杂，比如实现步骤从示例中的2步变成了10步了。命令式代码你就要一步一步地写清楚10个步骤，而声明式你只管结果就可以了，中间过程不需要你考虑。这时，声明式的优势就体现出来了，这个我们后面可以用2种方法实现一个复杂功能再详细对比。

组件化，或者说模块化，你可以理解为乐高积木，比如你想要实现一个计算器功能，那我们是不是要自己写呢？当然不是了。因为其它人已经用代码写好了一个计算器并封装成一个组件了，我们直接引用就可以了，就像我们使用 input 标签设置一个日期组件一样。

html 复制代码

/* 页面呈现一个日期选择框，这里我们是使用了浏览器帮我们实现的一个日期组件。 */
<input type="date" />

/* 页面呈现一个计算器，这里我们是使用了网友分享的一个计算器组件。 */
<Calc />

组件化省去了你的编码时间，是不是极大的提高了我们的开发效率呢？

我们接着看下面的代码。

js 复制代码

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

template 复制代码

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

这段代码体现了它的2个核心功能：

声明式渲染：与我们上面讨论的一样，只不过我们使用的 Vue2 语法，它是 Vue3。

响应性：一方面，你可以理解为从代码到这个方向。count 初始化为0（count: ref(0)），所以页面按钮也显示为0；如果你把它初始化为2（count: ref(2)），那么页面也会呈现2。

另一方面，就是从页面到代码方向。你在页面单击按钮之后，页面数字增加了1，这时候 count: ref(0) 里的 count 也会与页面保持一致。这个要如何查看呢？

打开演练场，按下 F12，在 Vue 开发者插件中即可查看。 play.vuejs.org/#eNp9kUFPAj...

渐进式框架

关于渐进式框架，你只需要明白它不要求你使用它时完全替换旧框架，而是新旧框架可混合使用，可以一个页面一个页面地慢慢替换。

假设你有一个老项目，它有10个页面。现在你想用 vue 升级替换，那你可以这周完成 A 页面升级替换、下周完成 B 页面升级替换，直至所有页面全部用 vue 完成了替换。

而非渐进式框架呢？就是你要采用该框架的话，所有页面必须全部用新框架完成才可以使用。

它不是我们理解的重点，简单了解即可。

单文件组件

在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。顾名思义，Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

vue 复制代码

<script>
这里写 js 代码
</script>

<template>
这里写 html 代码
</template>

<style>
这里写 css 样式
</style>

上面是官方的说明及文件的结构，与之相对的是多文件组件，这个典型的有 Angluar 框架。它会把你的页面放在 xxx.html 文件中，js 逻辑代码放在 xxx.ts 文件中，样式放在 xxx.css 文件中。

这是2种组织代码的方式，既然官方推荐单文件，我们照办即可。

API 风格

如果你学习过 Vue2，那你的代码就是选项式风格，这个官方文档的示例说得很清楚。

现在 Vue2 已经不在官方维护了，官方主推3，我们也以学习3为目标，而 Vue3 的风格也主推组合式。示例也相当清楚。至于两者谁好谁坏，好像更多人喜欢3的组合式。

官方也推荐在实际生产中使用组合式风格，我们还有什么好说的呢？！

好了，关于 Vue3 的简介就到这里了，下面我们继续走。