沉梦手记
  • 前端学习
  • Vue
  • Vue3入门
沉梦听雨
2023-07-07
目录

Vue3简介与环境搭建

# Vue3简介与环境搭建

# Vue3 简介

菜鸟教程：https://www.runoob.com/vue3/vue3-install.html

image

从 2020 年 9 月份 Vue3.0 发布以来，经过近两年的发展补充，Vue3 的生态圈逐步完善，已经成熟到足以支撑日常项目的研发。

而且，Vue3 在 Vue2 的基础上引入了 Typescript 重构了大量的代码，增加了很多新的特性，并发布了新一代的工程化工具 vite 。这些新的改动，让 Vue3 对我们的研发变得更加友好。

# Vue3 对研发更友好

让我们来看一下，同样的项目，使用 vite 作为开发构建工具的 Vue3 和使用 vue-cli 的 Vue2 的运行对比。

构建工具 启动时间 打包时间
vite 135ms 13025ms
vue-cli 1482ms 28186ms

从上面的表格我们可以看到，vite 相对比 vue-cli 来说，启动项目时间缩短达到了 10 倍，打包时间也明显减小。

同时，Vue3 也提高了编译的效率。以往当我们的项目越来越大时，经常是一个小小的改动，甚至需要等待几分钟的编译时间才能看到页面效果。而 vite 内部使用了 Esbuild 作为底层的依赖预编译工具，完全发挥了 Go 语言和多线程的优势，同时利用现代浏览器原生支持 ESM 特性，完全省略了打包的过程，极大的提高了编译运行的效率（关于 vite，我们会在其他章节详细介绍，这里只需要有个印象就可以了）。

  • 除了 vite 这个新工具以外，从代码层面，Vue3 的 Composition Api 新特性也让我们的项目代码功能结构更加清晰，组件拆分复用更加灵活。

  • 从框架层面，Vue3 框架的本身也使用 proxy 代替 Object.defineProperty 重新实现了真正的响应式“代理”，并且将渲染逻辑拆分为【浏览器渲染】和【平台无关渲染】，这对于我们的跨端，跨框架组合开发来说有着非同凡响的意义，你能想象在 React 中使用 Vue 的响应式吗，Vue3 就替你创造了这个可能性。

综上可见，Vue3 做了如此多的改变，从编译运行、代码语法、框架结构等多个层面同时发力，给研发提供了编译更快、打包体积更小、写法更清晰的直观感受，那我们又有什么理由去拒绝 Vue3 呢？

# 如何学习 Vue3？

大部分的同学应该都有过 Vue 的相关开发经验，而且 Vue 也是流行框架中出了名的简单易学，所以从 Vue2 到 Vue3 的升级远远没有想象的那么困难。

相信有部分同学阅读过 Vue 原理的相关文章，比如响应式的实现原理，使用了 Object.defineProperty 进行拦截代理等等，而在 Vue3 中，设计者们对部分功能的原理进行了重构调整，我们在学习的过程中，可以从两个方面来深入剖析。

  1. 在纵向上，与 Vue2 的实现原理进行对比。

这样可以帮助我们深刻的理解 Vue3 的新特性原理，新语法为什么要这么实现，同时也能更清楚 Vue2 的缺陷和短板，进一步的拓宽我们的知识面。

如果大家过去只是单纯地使用 Vue2，只是根据文档按部就班的进行开发，那么通过 Vue3.0 再次学习的过程，我们可以从原理到基础 api，再到 vue-router、Vuex 的引入，认真体会下 Vue3 的渐进式设计。

  1. 在横向上，与现有的热门框架 React ， Angular 等对比，深入理解各个框架的侧重点和特色。

这样可以进一步地体会 Vue 本身的设计理念和均衡的特性，以及各个框架的优缺点，我们可以更好地明白各个框架的定位以及如何去根据项目来选择一个合适的前端框架。

其实每个框架都有自己的核心点，只要抓住框架的几个重点，就像搭帐篷一样，就能支撑起我们自己的框架思维，学会去搭建自己的框架思维，那后面如果再有 Vue4，Vue5 或者其他新的框架，对于我们来说，都可以很快去接受并使用它们。

# Vue 能做啥？

我们知道，HTML 文档是由节点构成的集合。HTML 文件节点包括【元素节点、文本节点和属性节点】。下面请仔细观察 HTML 文件的页面结构。

<!DOCTYPE html> 
<html> 
  <head>     
    <meta charset="UTF-8">     
    <title>Vue3.0篇</title> 
  </head> 
  <body> 
    <h1>说编程</h1> 
    <a href="demo1.html">个人简介</a> 
  </body> 
</html>
1
2
3
4
5
6
7
8
9
10
11

# 1 文档结构

# 1.1 HTML是一棵树

观察了 HTML 页面结构之后，细心的你会发现："HTML 是一棵树"！

没错，HTML 就是一棵由 HTML 标签组成的树。树干是 <html> 标签，树枝是节点，树叶是属性，树花是文本。

# 1.2 浏览器如何砍树

为了方便浏览器，砍(解析) HTML 这棵树，W3C(万维网联盟)定义了访问 HTML 的 DOM 标准。DOM(Document Object Model)文档对象模型，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

JS 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程（意味着每一次操作都需要重新计算）。比如在用户一次操作中，他/她需要更新 10 个 HTML 元素(DOM节点)内容时，浏览器在收到第 1 个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行了 10 次操作。

在第 1 次计算完之后，紧接着下一个 DOM 更新请求时，之前节点的坐标值就变了。那么，进行第 2 次计算时，之前的操作相当于做了无用功，白白浪费了性能。频繁操作还会出现页面卡顿，影响用户体验的问题。

# 1.3 在性能优化之后

为了解决 DOM 访问 HTML 文件时存在的性能问题，一帮技术牛人就开始琢磨......

在 2009 年时，经过 Misko Hevery 等人的努力，终于研究出了一种 diff 算法，实现了那里需要更新就更新那里的愿望，为了方便分享喜悦，Misko Hevery 等人对其进行了扩展、升级、包装并给它取了一个好听的名字：AngularJS。

为了方便、保障 AngularJS 能更好的用到谷歌产品中，谷歌对其进行了收购。于是，一款有着诸多特性，核心功能的是 MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等的优秀前端 JS 框架，由此诞生了。

# 1.4 为何有 Vue

在 Angular 流行的那些年，好多程序员都投入了好多精力去学习，也不管 Angular 的 MVC 是否全部都能用得上。其实就算知道了，也无可奈何，理由你懂的。

直到 2013，就职于 Google Creative Lab，名叫尤雨溪的帅哥的出现，程序员用前端 JS 框架，才发现根本不需要那么累。

尤大大由于个人兴趣，对 Angular 进行了改造，去掉了 Angular MVC 中的 MV，只留下 V(View) 的内容。为了方便记忆，将其取名为 Vue.js。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 核心只关注视图层，采用自底向上增量开发的设计，目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。

Vue 从最初的实验阶段(2013年中到2014年2月)，0.x 阶段 (2014年2月到2015年10月)，1.x 阶段 (2015年10月到2016年9月)，2.x 阶段(2016年9月至2019年上半年)，到今天的 3.x 阶段，已经有足足 9 年多的时间了。

# 感受 Vue3

# 1 如何使用 Vue

在使用 <script> 标签引入 Vue 的情况下，有两种引入方式：

  • 通过 CDN 地址引入

  • 或直接本地 Vue.js 文件引入。

如果进行单文件组件(SFC)开发，则要复杂些，不是用 vite，就是用 CLI 脚手架。

对于初学者，建议从 <script> 标签引入 Vue 开始学习。

<script src="https://unpkg.com/vue@next"></script>
1

就是引用 CDN 的方式。从 https 名字，你就知道，这是引用网上的资源(受网络环境影响)。可网络差或断网的话，怎么办，不学了？

所以，也可以回到以前的传统方法，就是直接到：

https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/ (opens new window)

下载 vue.global.js 文件，然后在要用 Vue 的 HTML 文件中引用就好了!

<script src="vue.global.js"></script>
1

# 2 Vue3 倍轻松

在 Vue3 中，每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的，这种统一的应用方式，让你学起来更加轻松。

学习 Vue 3，就是对其生命周期中的函数，有的放矢，加加减减，或独立或联合。生命周期图，你不用记忆，也不用背诵，浏览一下就好，后面会逐步讲解的。

image

用第 1 个框图中的 createApp 和 mount 搞个样例，让代码飘一会。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>第1个vue 3程序</title>
    <style>
        .hello_div {
            border: 1px solid darkgreen;
            border-radius: 15px;
            width: 850px;
            line-height: 50px;
            text-align: center;
        }
    </style>
    <script src="vue.global.js"></script>
</head>

<body>
    <div id="hello" class="hello_div"> 你好，{{ msg }} </div>
    <script>
        // 传统html写法
        // let msg = 'vue.js 3'
        // // 找对人
        // let helloDiv = document.getElementById('hello')
        // // 做对事
        // helloDiv.innerText = `你好，${msg}`
        const vue = Vue.createApp({
            data() {
                return { msg: "vue 3" }
            }
        })
        vue.mount("#hello") </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

输出结果

image

# 3 Vue3 三步曲

应用 Vue3，可按三步曲进行：

  1. 创建 Vue 实例；
  2. 定义将要赋予元素的数据；
  3. 将数据和元素进行绑定。

定下这个调调之后，后面就是学习它的【语法(模板、条件和组件等)和生命周期函数的应用】了。

为了方便和提高代码的可读性，定义数据和 Vue 实例，常常放在一起声明。为了让你更清晰 Vue 的意义，我就来个数据绑定的例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第2个vue 3程序</title>
    <style>
        .input_div {
            border: 1px solid darkgreen;
            border-radius: 15px;
            width: 850px;
            line-height: 50px;
            text-align: center;
        }

        input {
            border: 1px solid salmon;
            width: 200px;
            height: 22px;
        }
    </style>
    <script src="vue.global.js"></script>
</head>

<body>
    <div id="hello" class="input_div"> 
      	<input id="name" v-model="msg" placeholder="hello" />
        <p>想学编程的人，快点来，<strong>{{ msg }}</strong>world。</p>
    </div>
    <script>
        // 第1步：创建vue实例
        // 第2步：定义数据
        // 第3步：绑定元素     
        Vue.createApp({
            data() {
                return { msg: '' }
            }
        }).mount("#hello")
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 工程化搭建（vite）

以上是通过 CDN 引入 Vue 的入门方式，适合初学者理解概念。实际项目中，推荐使用 vite 进行工程化搭建。

# 创建项目

采用 vite 作为前端项目的打包，构建工具

npm init vite@latest
1

按提示操作

cd 项目目录
npm install
npm run dev
1
2
3

# 编码 IDE

推荐采用微软的 VSCode 作为开发工具，到它的官网 Visual Studio Code - Code Editing. Redefined (opens new window) 下载安装即可

image-20220911090418621

要对 *.vue 做语法支持，还要安装一个 Volar 插件

image-20220911090756694

# 安装 devtools

  • devtools 插件网址：https://devtools.vuejs.org/guide/installation.html

image-20220815141648040

# 修改端口

打开项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070
  }
})
1
2
3
4
5
6
7
8
9
10

# 配置代理

为了避免前后端服务器联调时， fetch、xhr 请求产生跨域问题，需要配置代理，同样是修改项目根目录下 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 项目结构

index.html
package.json
tsconfig.json
vite.config.ts
├─public
└─src
    ├─assets
    ├─components
    ├─model
    ├─router
    ├─store
    └─views
1
2
3
4
5
6
7
8
9
10
11
12
  • index.html 为主页面
  • package.json npm 配置文件
  • tsconfig.json typescript 配置文件
  • vite.config.ts vite 配置文件
  • public 静态资源
  • src/components 可重用组件
  • src/model 模型定义
  • src/router 路由
  • src/store 共享存储
  • src/views 视图组件
上次更新: 2026/11/5 11:56:09
Pinia入门
TypeScript基础

← TypeScript基础→

Theme by Vdoing | Copyright © 2023-2026 沉梦听雨 | MIT License