好多新手不知道如何学习 Vue，或者说不知道如何把 Vue 应用到工作当中，毕竟不是所有人都有工作经验。本文适合大学生、无工作经验的人士阅读。大神请指点。
我一直在使用 Vue2，最近失业在家，正好学习一下 Vue3。诸君共勉。
什么是 Vue?
学习一门语言，最好的入门肯定不能放过官方文档。我们先看一下官方文档是如何定义 Vue 的。
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
在这里肯定有人对一些词汇感觉到陌生，比如“框架”、“声明式”、“组件化”。
框架，说白了就是别人写的代码，但是它比较通用，你可以直接使用。为什么你要使用他人的框架呢？因为省时省力，提高了代码健壮性，开发效率高。
比如我们拿上一代的神仙级框架 jQuery 举例。如果你想要选择一个元素myId的兄弟元素，原生写法如下：
document.getElementById('#myId').nextElementSibling
jQuery 写法如下：
$('#myId').next()
是不是代码一下子就清爽了不少？
这些只是最简单最基本的，当你业务复杂后，框架的好处就体现更大了。
在这里，jQuery就是框架。相信什么是框架，大家可以容易理解，我就不再赘述了。
声明式，这个应该是疑惑最多的一个词了。声明式是与命令式相对的。从定义中可知，Vue 作为一种声明式框架，那什么是命令式框架呢？我们举例说明如下：
<div id="app">
/* 2. 段落的内容为 message 的值，也就是 Hello Vue! */
<p>{{ message }}</p>
</div>
const app = new Vue({
el: '#app',
data: {
// 1. 设置 message 为字符串 Hello, Vue!
message: 'Hello, Vue!'
}
})
如上就是基于 Vue 的声明式用法，设置段落内容为 “Hello, Vue!”。
在这里我们就是设置变量 message 的内容为 “Hello, Vue!”，然后在 html 中引用一下。框架会自动把 message 的内容替换为我们设置的值。具体它是如何设置的，这是框架内部的实现细节，我们不需要关心，只要会使用即可。
下面来看一下命令式如何实现相同的功能。
<div id="app">
<p id="message"></p>
</div>
// 1. 首先获取要设置的段落
const paragraph=document.getElementById('#message');
// 2. 设置段落内容
paragraph.textContent='Hello JavaScript'
命令式代码，你就要告诉代码每一步是如何实现的，而声明式代码只需要告诉它最后结果就可以了。这就是两者的不同。
当然，我以上举例很简单，你可能看不出差别，但随着业务复杂，比如实现步骤从示例中的2步变成了10步了。命令式代码你就要一步一步地写清楚10个步骤，而声明式你只管结果就可以了，中间过程不需要你考虑。这时，声明式的优势就体现出来了，这个我们后面可以用2种方法实现一个复杂功能再详细对比。
组件化，或者说模块化，你可以理解为乐高积木，比如你想要实现一个计算器功能，那我们是不是要自己写呢？当然不是了。因为其它人已经用代码写好了一个计算器并封装成一个组件了，我们直接引用就可以了，就像我们使用 input 标签设置一个日期组件一样。
/* 页面呈现一个日期选择框，这里我们是使用了浏览器帮我们实现的一个日期组件。 */
<input type="date" />
/* 页面呈现一个计算器，这里我们是使用了网友分享的一个计算器组件。 */
<Calc />
组件化省去了你的编码时间，是不是极大的提高了我们的开发效率呢？
我们接着看下面的代码。
import { createApp, ref } from 'vue'
createApp({
setup() {
return {
count: ref(0)
}
}
}).mount('#app')
<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) 封装在同一个文件里。
<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 的简介就到这里了，下面我们继续走。
原文链接：https://juejin.cn/post/7343138955511562275 作者：zhangwei
