关于前端:Vue3-TypeScript-系列一-Vue3-初体验

1. 意识 Vue.js

1.1 为什么要学习 Vue

如果从事实（找工作）的角度登程，学好 Vue 你能够找到一份称心的前端工作，而没有把握 Vue 则很难找到一份称心的前端工作（须要补充的是，除了 Vue，当初不少岗位对“小程序”也有要求）。

1.2 Vue 的特点

Vue（读音 /vjuː/，相似于 view）是一套用于构建用户界面的渐进式 JavaScript 框架：

• 全称是 Vue.js 或 Vuejs；

• 什么是渐进式框架呢？

  • 渐进式框架意味着咱们能够在我的项目中一点点地引入和应用 Vue，而不肯定须要全副应用 Vue 来开发整个我的项目。你能够抉择应用（或不应用）Vue 的某局部性能，你也能够只在我的项目的某个模块中应用 Vue。

1.3 Vue 和 React 等框架的比照

目前前端最风行的三大框架：Vue、React、Angular。

• Angular：入门门槛较高，并且国内市场占有率较低。但不否定其自身是十分优良的框架，它的很多设计思维与 Node 框架 nest.js 类似，而且它们基本上都要用 TypeScript 开发。
• React：国内外的市场占有率都较高。作为前端工程师也是必须学习的一个框架。大公司大我的项目在以前也更偏向于应用 React 开发，因为相对来说 React 可能更加的灵便，一些 Vue2 可能没法做的场景 React则能够做（当然，当初 Vue 从 2 版本升级到 3 版本后，有了 Composition API，也非常灵活了）。
• Vue：在国内市场占有率最高，简直所有的前端岗位都会对 Vue 有要求。

1.3.1 框架数据比照

1.3.1.1 Google 指数

1.3.1.2 百度指数

1.3.1.3 npm 下载量

1.3.1.4 GitHub

1.3.2 谁是最好的前端框架

这里不给出论断，因为就像人们争执谁是世界上最好的语言一样，争执这个问题没有意义。

但咱们无妨从事实的角度先剖析一下，学习哪门语言更容易找工作（哪门语言市场占有率更高）？

• 找后端的工作：优先举荐 Java，其次是 Go，再次是 Node（JavaScript），可能不举荐 PHP、C#；
• 找前端的工作：优先举荐 JavaScript（TypeScript），其次是 Flutter，再次是 Android（Java、Kotlin）、iOS（OC、Swift）；
• 其它方向：算法工程师、游戏开发、人工智能等等。

那么，就前端来说，学习了 HTML、CSS、JavaScript 之后，哪一个框架更容易找到工作？

• 如果去国外找工作，优先举荐 React，其次是 Vue 和 Angular，不举荐 jQuery 了；
• 如果在国内找工作，优先举荐、必须学习 Vue，其次是 React，再次是 Angular，不举荐 jQuery 了。

1.4 学习 Vue2 还是 Vue3

• 对于曾经把握 Vue2 的同学来说，间接学习 Vue3 中相干的内容即可；
• 对于没有学过 Vue2 的同学，间接学习 Vue3 就行了。

《程序员》：Vue 3 版本兼容 2.x，对于想要学习 Vue 的开发者而言，时常在纠结是从 Vue2 开始学根底还是间接学 Vue3，对此，你有着什么样的倡议？

尤雨溪（Vue 作者）：间接学 Vue 3就行了，根底概念是截然不同的。

1.5 目前须要学习 Vue3 吗

2020 年 9 月 18 日，万众期待的 Vue3 终于公布了正式版，命名为“One Piece”。

• 它带来了很多新的个性：更小的体积 、 更好的性能 、 更优良的 API 设计 、 更好的 TypeScript 集成；
• 在 Vue3 刚刚公布时，很多人蠢蠢欲动，想要尝试 Vue3 的各种新个性，这时咱们用 Vue3 写写 demo 练习是没有问题的，但真正在理论业务我的项目中应用 Vue3 还须要一个绝对过程；
• 包含 Vue3 的进一步稳固、社区更多 Vue3 相干的插件、组件库的反对和欠缺（因为生态须要工夫，生态里的工具、周边以及库都须要工夫去兼容，Vue3 的一些新用法也须要工夫去积淀）。

那么当初是否是学习 Vue3 的工夫呢？

• 答案是必定的；
• 首先 Vue3 在通过一系列的更新和保护后，曾经趋于稳定，并且尤雨溪之前在 VueConf China 2021 上也发表会在 往年（2021）第二季度 将 Vue3 作为默认版本（当初的工夫是 7 月 10 号，npm 还没有默认装置 Vue3，文档也还没有默认指向 v3 文档）。
• 社区通过一段时间的积淀后，也更加欠缺了，包含 Ant Design Vue、Element Plus 都提供了对 Vue3 的反对，所以很多公司目前新的我的项目都曾经在应用 Vue3 来进行开发了。
• 并且在面试中，也会问到 Vue3、Vite2 工具相干的问题。

1.6 Vue3 带来的变动

1.6.1 源码

• 源码通过 monorepo 的模式来治理

  • mono：单个；
  • repo：repository（仓库）；
  • 就是将许多我的项目的代码存储在同一个仓库中；
  • 这样做能够使得多个包自身互相独立，能够有本人的性能逻辑、单元测试等，同时又在同一个仓库下，方便管理；
  • 而且模块划分得更加清晰，可维护性、可扩展性更强。

• 源码应用 TypeScript 进行了重写

  • 在 Vue2.x 时，Vue 应用 Flow 进行类型检测；
  • 当初到了 Vue3.x，Vue 的源码全副应用 TypeScript 进行重构，并且 Vue 自身对 TypeScript 的反对也更好了。

1.6.2 性能

• 应用 Proxy 进行数据劫持

  • 在 Vue2.x 的时候，Vue2 是应用 Object.defineProperty 来劫持数据的 getter 和 setter 办法的；
  • 这种形式始终存在一个缺点：当给对象增加或删除属性时，无奈劫持和监听；
  • 所以在 Vue2.x 的时候，不得不提供一些非凡的 API，比方 $set、$delete，事实上都是一些 hack 办法，减少了开发者学习新的 API 的老本；
  • 而在 Vue3.x 开始，Vue 应用 Proxy 来实现数据的劫持，该 API 的用法和相干原理后续会讲到；

• 删除了一些不必要的 API

  • 移除了实例上的 $on、$off 和 $once；
  • 移除了一些个性：filters（过滤器）、inline template attribute（内联模板属性）等；

• 编译方面的优化

  • 生成 Block Tree；
  • Slot 编译优化；
  • diff 算法优化；

1.6.3 新的 API

• 由 Options API 到 Composition API

  • 在 Vue2.x 的时候，咱们会通过 Options API 来形容组件对象；
  • Options API 包含 props、data、computed、watch、生命周期事件、methods 等等选项；

  • Options API 存在比拟大的问题是多个逻辑可能是在不同的中央：

    • 比方 created 中会应用 methods 中的某个办法来批改 data 中的数据，代码的内聚性十分差；
  • 而 Composition API 能够将相关联的代码放到同一处进行解决，而不须要扩散在多个 Options 中，也就不必再在多个 Options 之间寻找了；

• Hooks 函数减少代码的复用性

  • 在 Vue2.x 的时候，咱们通常通过 mixins 在多个组件之间共享逻辑；
  • 然而有一个很大的缺点就是 mixins 也是由一大堆的 Options 组成的，多个 mixins 间会存在命名抵触的问题；
  • 到了 Vue3.x，咱们能够通过 Hook 函数将一部分独立的逻辑抽取进来，并且它们还能够做到是响应式的；
  • 具体的益处，会在后续演练和解说（包含原理）；

2. Vue 的装置

简略意识了 Vue 之后，如何应用它呢？

首先，咱们要晓得，Vue 的实质就是一个 JavaScript 库。刚开始咱们不须要把它设想的非常复杂，只需把它了解成一个曾经帮忙咱们封装好的库，在我的项目中咱们能够引入并应用它。

应用 Vue 之前，咱们须要先装置 Vue，装置 Vue 这个 JavaScript 库的形式有以下 4 种：

• 在页面中通过 CDN 的形式引入；
• 下载 Vue 的 JavaScript 文件后在页面中手动引入；
• 通过 npm 包管理工具装置（讲 Webapck 时再讲）；
• 间接装置 Vue CLI，装置 Vue CLI 时会装置 Vue（讲完 Webpack 后讲脚手架时再讲，后续咱们通过 Vue CLI 创立我的项目并应用 Vue）；

2.1 形式一、CDN 引入

• 什么是 CDN 呢？CDN 即内容散发网络（Content Delivery Network 或 Content Distribution Network，缩写：CDN）

  • 它是指通过 相互连接的网络系统 ，利用 最靠近 每位用户的服务器；
  • 更快、更牢靠地将 音乐、图片、视频、应用程序及其它文件 发送给用户；
  • 来提供 高性能、可扩展性及低成本 的网络内容传递给用户。

• 罕用的 CDN 服务器能够分为两种：

  • 本人的 CDN 服务器：须要购买本人的 CDN 服务器，目前华为、阿里、腾讯、亚马逊、谷歌等平台上都能够购买 CDN 服务器；
  • 开源的 CDN 服务器：国内上应用比拟多的是 unpkg、JSDelivr、cdnjs；
• 通过 CDN 引入 Vue 的最新版本：

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

在浏览器中拜访 https://unpkg.com/vue@next 这一 CDN 地址也能够看到 Vue 打包后没有通过压缩的源代码（在开发阶段倡议用没有通过压缩的代码，这样能够看到更多细节）：

能够看到，该文件的最下面定义了一个全局变量 Vue（其实是一个对象），因而，咱们接下来就是通过这个全局变量 Vue 来应用 Vue 了。

• Hello Vue 案例的实现：

<!-- 4. 用来给 app 对象挂载的元素（通常为 div，并且设置 id 为 app，但也能够应用其它元素和其它选择器）-->
<div id="app"></div>

<!-- 1. CDN 引入 Vue -->
<script src="https://unpkg.com/vue@next"></script>
<script>
  const obj = {
    // 3. 在 template 属性中申明后续 createApp 函数返回的 app 对象中要显示的内容
    template: '<h2>Hello Vue</h2>'
  };
  // 2. 调用全局变量 Vue 中的 createApp 函数，// 该函数要求传入一个对象，而其返回值也是一个对象
  const app = Vue.createApp(obj);
  // 5. 将 app 对象挂载到 id 为 app 的 HTML 元素上（即通知 app 对象要在哪里显示）// 这里咱们不须要通过 document.querySelector 办法手动去拿指标元素，只须要传入要匹配的选择器的 DOM 字符串即可，// 因为 Vue 外部会依据这里传入的字符串帮忙咱们用 document.querySelector 去找到指标元素（源码中对应的代码：// packages/runtime-dom/src/index.ts -> createApp -> app.mount -> 
  // normalizeContainer(containerOrSelector) -> if (isString(container)) -> 
  document.querySelector(container)）app.mount('#app');
</script>

总结一下上述案例应用 Vue 的 5 个步骤：

1. 引入 Vue；
2. 创立一个蕴含模板的对象；
3. 通过全局变量 Vue 调用 createApp 办法（对象中的函数称之为办法）并传入该对象；
4. 返回的对象调用 mount 办法把本人挂载到某个元素上；
5. 页面上显示出模板内容；

2.2 形式二、下载后引入

下载 Vue 的源码，能够间接关上 CDN 的链接：

• 关上链接（https://unpkg.com/vue@next），复制其中所有的代码；
• 创立一个新的文件，如 vue.js，将复制的代码粘贴进该文件中。

接下来，就能够（比方在“本地引入.html”中）通过 script 标签引入方才创立的新文件：

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

• 你好啊，Vue3 案例的实现：

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

<script src="./js/vue.js"></script>
<script>
  Vue.createApp({template: '<h2> 你好啊，Vue3</h2>'}).mount('#app');
</script>

3. 计数器案例

上面咱们来实现一个计数器的案例：

• 点击 +1 按钮，页面内容会显示数字 +1；
• 点击 -1 按钮，页面内容会显示数字 -1；

能够抉择很多种形式来实现，咱们这里抉择用 原生的形式 和 Vue 的形式 别离实现，并比拟两者的不同。

3.1 原生实现

<h2 class="counter"></h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>

<script>
  // 1. 获取展现以后计数的元素和两个按钮元素
  const counterEl = document.querySelector('.counter');
  const incrementBtnEl = document.querySelector('.increment');
  const decrementBtnEl = document.querySelector('.decrement');

  // 2. 定义一个变量，用来记录以后计数
  let counter = 0;
  // 3. 为展现以后计数的元素内容赋初值
  counterEl.innerHTML = counter;

  // 4. 为按钮增加点击事件的监听
  incrementBtnEl.addEventListener('click', () => {
    counter++;
    counterEl.innerHTML = counter;
  });
  decrementBtnEl.addEventListener('click', () => {
    counter--;
    counterEl.innerHTML = counter;
  });
</script>

3.2 Vue 实现

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

<!-- 引入 Vue -->
<script src="./js/vue.js"></script>
<script>
  Vue.createApp({
    // 模板内容有点多，写在一行不好写，能够采纳 ES6 新增的模板字面量定义字符串，这样就能保留换行字符，能够跨行定义字符串了。// 上面模板内容的最外层包了个 div，这是 Vue2 的要求，而到了 Vue3 中，能够去掉这个 div。// Vue3 的 template 最外层根元素（如上面的 div）能够不加（Vue2 必须要加一层根元素进行包裹，否则会报错：// Component template should contain exactly one root element. If you are using v-if on multiple 
    // elements, use v-else-if to chain them instead.）。// 模板中能够通过“Mustache”语法（双大括号）应用上面 data 函数属性返回对象中的属性；// 模板中能够通过“@click”绑定点击事件，与上面 methods 对象中的属性进行绑定。template: `
      <div>
        <h2>{{message}}</h2>
        <h2>{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
          </div>
        `,
    // createApp 函数须要传入的是一个对象，对象是能够有多个属性的，// 而 Vue 中规定了，这里还能够有 data 属性。// Vue3 中 data 属性对应的值须要是一个函数并返回一个对象，而不容许间接传对象，// 否则会报错：Uncaught TypeError: dataFn.call is not a function（Vue2 中 data 能够间接传一个对象）data() {
      return {
        // data 函数返回的对象中能够定义任意属性；// 它们都会被退出到 Vue 的响应式零碎中，所以都是响应式的；// 它们都能够在模板中应用
        message: 'Hello World',
        counter: 0
      };
    },
    // 还能够有 methods 属性
    // methods 属性对应一个对象，外面能够定义各种各样的办法
    methods: {
      // 定义“加一”操作的办法（ES6 之前对象中定义方法的语法）increment: function() {console.log('点击了 +1');
        // methods 中能够通过 this 拿到 data 中的数据(实质上拿到的是 Proxy)
        this.counter++;
      },
      // 定义“减一”操作的办法（ES6 对象中定义方法的语法糖，即简写模式）decrement() {console.log('点击了 -1');
        this.counter--;
      }
    }
  }).mount('#app');
</script>

咱们还能够对上述代码做一点抽取（template 的抽取 4.1.1 节会具体讲），批改如下：

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

<template id="my-app">
  <h2>{{message}}</h2>
  <h2>{{counter}}</h2>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>

<script src="./js/vue.js"></script>
<script>
  const App = {
    template: '#my-app',
    data() {
      return {
        message: 'Hello World',
        counter: 0
      };
    },
    methods: {increment: function() {console.log('点击了 +1');
        this.counter++;
      },
      decrement() {console.log('点击了 -1');
        this.counter--;
      }
    }
  };

  Vue.createApp(App).mount('#app');
</script>

3.3 命令式和申明式

咱们会发现，原生开发和 Vue 开发的模式和特点是齐全不同的，这里其实波及到 两种不同的编程范式：

• 命令式编程 和申明式编程；
• 命令式编程 关注的是 “怎么做”（how to do）； 申明式编程 关注的是“做什么”（what to do），”怎么做“（how to do）的过程交给框架（机器）实现。

在原生的实现过程中，咱们是如何操作的呢？

• 咱们每实现一个操作，都须要通过 JavaScript 编写一条代码 ，来给 浏览器一个指令；
• 这样的编写代码的过程，咱们称之为 命令式编程；
• 在晚期的原生 JavaScript 和 jQuery 开发中，咱们都是通过这种命令式的形式编写代码的；

在 Vue 的实现过程中，咱们是如何操作的呢？

• 咱们会在 createApp 传入的对象中申明须要的内容：模板（template）、数据（data）、办法（methods），剩下的具体操作则由 Vue 帮忙咱们实现；
• 这样编写代码的过程，咱们称之为 申明式编程；
• 目前 Vue、React、Angular 的编程模式，都是这种申明式。

3.4 MVVM 模型

• MVC 和 MVVM 都是一种 软件的体系结构：

  • MVC 是 Model-View-Controller 的简称，是后期应用十分宽泛的框架的架构模式，比方 iOS、前端；
  • MVVM 是 Model-View-ViewModel 的简称，是目前十分风行的架构模式；

• 通常状况下，咱们也称 Vue 是一个 MVVM 的框架

  • Vue 官网其实有阐明：“尽管没有齐全遵循 MVVM 模型，然而 Vue 的设计也受到了它的启发”。

后面原生实现计数器的代码就能够依照 MVC 的软件体系结构进行划分（尽管划分得不是很清晰）：

而后面 Vue 实现计数器的代码则是依照 MVVM 的软件架构模式编写的：

综上，计数器的原生实现能够看成是一个 MVC 架构模式的命令式编程，计数器的 Vue 实现能够看成是一个 MVVM 架构模式的申明式编程。

4. template、data、methods 属性详解

在应用 createApp 的时候，咱们传入了 一个对象，上面咱们具体解析一下之前传入的属性别离代表什么含意。

4.1 template 属性

template 属性示意的是 Vue 须要帮忙咱们渲染的模板信息。

• 目前咱们看到它外面有 很多的 HTML 标签 ，这些标签会 替换掉 咱们挂载到的元素（咱们这里是 id 为 app 的 div）的 innerHTML；

  • 源码中对应的代码：packages/runtime-dom/src/index.ts -> createApp -> app.mount -> container.innerHTML = ''，Vue 会在挂载前清空外面的内容；
• 模板中有一些 奇怪的语法 ，比方 {{}}、@click，这些都是 模板特有的语法，咱们会在前面讲到；

然而这个模板的写法 有点顺当 ，并且 IDE 很有可能 没有任何提醒，有碍咱们编程的效率。

4.1.1 template 写法

好消息是，Vue 为咱们提供了另外两种形式来编写 template：

• 形式一：应用 script 标签，同时标记它的类型为 x-template，设置 id；

<script type="x-template" id="my-app">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
  </div>
</script>

• 形式二：应用任意标签（通常是 template 标签，因为它不会被浏览器渲染），设置 id；

  • HTML 内容模板（<template>）元素是一种用于保留 HTML 的机制，它不会在页面加载完后立刻被渲染（出现），但随后在运行时应用 JavaScript 期间可能会被实例化。¹

<template id="my-app">
  <div>
    <h2>{{message}}</h2>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

• 这个时候，在给 createApp 函数传入的对象中，咱们须要传入的 template 以 # 结尾

  • 如果字符串是以 # 开始，那么它将被用作 querySelector，并且应用匹配元素的 innerHTML 作为模板字符串。

形式一残缺代码：

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

<script type="x-template" id="my-app">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
  </div>
</script>

<script src="./js/vue.js"></script>
<script>
  Vue.createApp({
    template: '#my-app',
    data() {
      return {
        message: 'Hello World',
        counter: 0
      };
    },
    methods: {increment: function () {this.counter++;},
      decrement() {this.counter--;}
    }
  }).mount('#app');
</script>

形式二残缺代码：

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

<template id="my-app">
  <div>
    <h2>{{message}}</h2>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script src="./js/vue.js"></script>
<script>
  Vue.createApp({
    template: '#my-app',
    data() {
      return {
        message: 'Hello World',
        counter: 0
      };
    },
    methods: {increment: function () {this.counter++;},
      decrement() {this.counter--;}
    }
  }).mount('#app');
</script>

开发中，举荐应用 <template> 的形式编写模板，因为有代码提醒和代码高亮。

4.2 data 属性

• data 属性须要传入一个函数，并且该函数须要返回一个对象：

  • 在 Vue2.x 的时候，也能够传入一个对象（仅就 Vue 实例而言，如果是组件的 data，则只承受 function）；
  • 在 Vue3.x 的时候，必须传入一个函数，否则会间接在浏览器中报错；

• data 中返回的对象会被 Vue 的响应式零碎劫持 ，之后 对该对象的拜访或批改 都会在劫持中被解决；

  • 所以咱们在 template 中通过 {{counter}} 拜访 counter，能够从对象中获取到数据；
  • 所以咱们批改 counter 的值时，template 中的 {{counter}} 也会产生扭转；
• 这种响应式的具体原理，咱们前面会有专门的篇幅来解说。

4.3 methods 属性

• methods 属性是一个对象，咱们通常会在这个对象中定义很多的办法：

  • 这些办法能够 被绑定到 template 模板 中；
  • 在这些办法中，咱们能够 应用 this 关键字 来间接拜访到 data 中返回的对象的属性；

• 对于有教训的同志，这里能够就官网文档中的以下这段形容²：

  • 思考两个问题：
  1. 为什么不能应用 箭头函数？（官网文档给出的解释真的了解了吗？）
  2. 不应用箭头函数的状况下，this 到底指向什么？（能够作为一道面试题）

4.4 其它属性

当然，createApp() 函数传入的对象中还有很多其它的属性，咱们会在后续进行解说：

• 比方 props、emits、setup、computed、watch 等等；
• 也包含很多的生命周期函数；

不必焦急，咱们会一个个学习它们的。

5. Vue 源码的下载、调试、浏览

• 有同志可能会纳闷，后面第 2 节不是曾经下载了 Vue 的源码了吗？怎么又要下载？

  • 因为后面下载的 Vue 源码是曾经打包过的，所有代码都放到一个文件中了，看起来十分不不便。

• 也有同志可能会问，第 2 节中通过 CDN 下载的 Vue 的源码中不仅有 ES5 的代码，怎么还有 ES6 的代码呢？

  • 这是因为事实上最终在我的项目打包时，通过 babel 工具进行设置之后，这个代码还会进行一次打包（二次打包，而且还会做压缩等其它解决），所以临时还存在 ES6 的代码不会有问题。

对于第 2 节中通过 CDN 下载的 Vue 的源码，咱们可能会浏览外面的某个函数，但不会依照这份打包后的源码一点点地去读。那咱们该怎么办呢？咱们会这样做：

1. 关上 GitHub 网站，左上方搜寻框里输出 vue-next（即 Vue3 版本）进行搜寻；
2. 点击搜寻后果中的 vuejs/vue-next（咱们能够看到，它是用 TypeScript 写的）；

3. 进入 vuejs/vue-next 仓库后，接下来有两种形式进行下载：

   • git clone 形式（举荐）：点击 Code 按钮，间接点击上面 URL 链接前面的复制按钮复制 URL，而后咱们以 git clone 的形式下载源码（为什么抉择这种形式？因为 git 在运行它的 dev 时，会依赖 git 的一些货色，有用 git 做一些校验。如果间接抉择 Download ZIP，外面没有 git（短少一个 .git 文件夹），到时候代码可能会运行不起来）：

     • 关上终端（Windows 上是 cmd 或者应用 Git Bash）；
     • 通过 cd 命令进入待会下载的源码你想要存储的目录；
     • 执行 git clone 方才复制的 URL 命令，下载源码；
   • Download ZIP 形式：点击 master 下拉按钮，点击 Tags 标签，抉择最新的稳固的版本进行下载（咱们个别不会下载 Branches 下的 master 主分支或其它 dev 分支（最终会合并到 master 主分支中），因为它们很可能是正在进行开发中的代码，存在不稳定性；而 Tags 下的 xxx-beta.x 则是测试版，也不够稳固），咱们这里就抉择 v3.1.4 版本进行下载：

如果你抉择了 Download ZIP 的形式下载了源码，又想让源码运行起来，能够这么做：

1. 先解压下载下来的源码压缩包，用 Visual Studio Code 关上解压后的文件夹（vue-next-3.1.4）；

2. 在 Visual Studio Code 中关上终端，输出 yarn install 命令并执行；

   • 这里须要你电脑上之前曾经装置过 node 了，并且用 node 装置过 yarn 了，如果没有，须要先下载 node（倡议去 node 官网下载“长期反对版”（LTS）的，因为绝对于“以后公布版”（Current）的，“长期反对版”的会更稳固一点）；
   • 下载安装完 node 之后，就会有 npm 这个工具了，就能够在命令行终端执行 npm install yarn -g 命令，而后你的电脑上就有 yarn 这个工具了；
   • 因为 Vue 的源码是用 yarn 来治理的（源码目录下能够看到 yarn.lock 文件），所以咱们须要执行 yarn install 命令装置 Vue 源码所需的依赖。
3. 执行 git init 命令将以后文件夹（vue-next-3.1.4）初始化为一个空的 Git 仓库；
4. 执行 git add . 命令将当前目录下的所有文件增加到暂存区；
5. 执行 git commit -m "fix(install): install dependences" 命令将暂存区内容提交到本地仓库中；
6. 执行 yarn dev（实质上会去执行以后文件夹下 package.json 文件中的 scripts 中的 dev 脚本对应的命令）命令，它会把以后文件夹下的 packages 文件夹下的所有文件（都是 Vue 的源代码）进行打包，打包后的代码会放到 packages/vue/dist/vue.global.js 文件（该文件其实就是上传到 CDN 下面的那个文件）中；
7. 有了这份打包后的源代码文件，咱们就能够来到 packages/vue/examples 目录下，新建一个目录（如 coderzhj），再在该目录中新建一个 html 文件（如 demo.html），接着在该文件中引入这个打包后的源码文件后，就能够用 Vue 编写一些代码并在 Vue 的我的项目里跑起来了：

而如果是通过 git clone 形式下载的源码，则无需解压，用 Visual Studio Code 间接关上源码寄存地位下的 vue-next 文件夹。因为 git clone 形式下载下来的是整个仓库的代码，默认是 master 主分支版本，如果想切换成其它版本（比方以后最新的稳固版本 v3.1.4），能够先在终端执行 git tag 命令查看都打包过哪些 tag，再通过 git checkout v3.1.4 切换到 v3.1.4 版本（不切换的话，默认应用 master 也没有太大问题），而后执行 yarn install 后间接执行 yarn dev（或 npm dev）即可。

那跑起来后有什么用呢？用途就是咱们能够在 script 标签中打上 debugger 进行调试啦：

比方，咱们想看下 createApp 到底做了些什么，就能够 F10 到 Vue.createApp 这行，再 F11 跳转进 createApp 函数：

然而，咱们会发现这样做是在 vue.global.js 这个大文件中进行的调试，这意味着所有源代码都是放到了一起的，看起来十分不不便。那有没有方法让调试的时候跳转到某个具体的源代码文件中呢？有，咱们能够批改我的项目目录下 package.json 文件中的 scripts 中的 dev 脚本对应的命令，在该命令最初增加上 --sourcemap（webpack 相干的内容）：

而后从新执行 yarn dev 把我的项目从新打包后跑起来（这时 dist 目录下会多进去一个 vue.global.js.map 文件，这个就是 sourcemap 文件，用来不便咱们调试），这样一来，调试过程中的每一行代码都能够映射到它所在的具体文件中了，那么咱们就能通过映射的文件和我的项目中的 packages 文件夹下的文件对应起来了：

写在最初

文中如有谬误，欢送大家在评论区斧正。

1. The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript. — MDN ↩
2. 详见 https://v3.cn.vuejs.org/api/o… ↩