邂逅Vue3开发

2022-04-25  本文已影响0人  Imkata

认识Vue

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

什么是渐进式框架呢？
表示我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目。

目前Vue在前端处于什么地位？

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

谁是最好的前端框架？

我们从现实的角度，分析一下，学习哪一门语言更容易找到工作？

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

目前需要学习Vue3吗？

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

它也带来了很多新的特性：更好的性能、更小的包体积、更好的TypeScript集成、更优秀的API设计。

那么现在是否是学习vue3的时间呢？

答案是肯定的。
首先vue3在经过一系列的更新和维护后，已经是趋于稳定，并且在之前尤雨溪也宣布在今年（2021年）第二季度会将vue3作为Vue CLI的默认版本了。

目前社区也经过一定时间的沉淀，更加的完善了，包括AntDesignVue、Element-Plus都提供了对Vue3的支持，所以很多公司目前新的项目都已经在使用Vue3来进行开发了。
并且在面试的时候，几乎都会问到各种各样Vue3、Vite2工具相关的问题。

Vue3带来的变化

① 源码

  1. 源码通过monorepo的形式来管理源代码

    • Mono：单个，Repo：repository仓库，主要是将许多项目的代码存储在同一个repository中
    • 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理，而且模块划分的更加清晰，可维护性、可扩展性更强

  2. 源码使用TypeScript来进行重写

    • 在Vue2.x的时候，Vue使用Flow来进行类型检测
    • 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了

② 性能

  1. 使用Proxy进行数据劫持

    • 在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的。这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的。所以在Vue2.x的时候，不得不提供一些特殊的API，比如$set或$delete，事实上都是一些hack方法，也增加了 开发者学习新的API的成本。
    • 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到。

  2. 删除了一些不必要的API

    • 移除了实例上的$on, $off 和 $once；
    • 移除了一些特性：如filter、内联模板等；

  3. 包括编译方面的优化

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

③ 新的API

  1. 由Options API 到 Composition API

    • 在Vue2.x的时候，我们会通过Options API来描述组件对象，Options API包括data、props、methods、computed、生命周期等等这些选项。存在比较大的问题是多个逻辑可能是在不同的地方：比如created中会使用某一个method来修改data的数据，代码的内聚性非常差。
    • Composition API可以将相关联的代码放到同一处进行处理，而不需要在多个Options之间寻找。

  2. Hooks函数增加代码的复用性

    • 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑，但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题。
    • 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的。
    • 具体的好处，会在后续的课程中演练和讲解（包括原理）。

系统学习Vue3+TypeScript

如何使用Vue呢？

Vue的本质，就是一个JavaScript的库。

刚开始我们不需要把它想象的非常复杂，我们就把它理解成一个已经帮助我们封装好的库，在项目中可以引入并且使用它即可。

那么安装和使用Vue这个JavaScript库有哪些方式呢？

方式一：在页面中通过CDN的方式来引入
方式二：下载Vue的JavaScript文件，并且自己手动引入
方式三：通过npm包管理工具安装使用它（webpack再讲）
方式四：直接通过Vue CLI创建项目，并且使用它

方式一：CDN引入

什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）。

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

常用的CDN服务器可以大致分为两种：

Vue的CDN引入：

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

示例代码如下：

<body>
  
  <div id="app">
    <h2>Hello World</h2>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const why = {
      template: '<h2>Hello World</h2>'
    }

    const app = Vue.createApp(why);
    app.mount("#app")
  </script>

</body>

方式二：下载和引入

  1. 下载Vue的源码
    可以直接打开CDN的链接，复制其中所有的代码，创建一个新的文件，比如vue.js，将代码复制到其中。
  2. 通过script标签，引入刚才的文件：
<script src="../js/vue.js"></script>

示例代码如下：

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

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `<h2>你好啊, 李银河</h2>`
    }).mount("#app");
  </script>
</body>

计数器案例

通过计数器案例比较原生开发和Vue开发的区别。

原生开发：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2 class="counter">0</h2>
    <button class="increment">+1</button>
    <button class="decrement">-1</button>

    <script>
      // 1.获取所有的元素
      const counterEl = document.querySelector(".counter");
      const incrementEl = document.querySelector(".increment");
      const decrementEl = document.querySelector(".decrement");

      // 2.定义变量
      let counter = 100;
      counterEl.innerHTML = counter;

      // 3.监听按钮的点击
      incrementEl.addEventListener("click", () => {
        counter += 1;
        counterEl.innerHTML = counter;
      });
      decrementEl.addEventListener("click", () => {
        counter -= 1;
        counterEl.innerHTML = counter;
      });
    </script>
  </body>
</html>

Vue开发：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="app">哈哈哈哈啊</div>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: `
        <div>
          <h2>{{message}}</h2>
          <h2>{{counter}}</h2>
          <button @click='increment'>+1</button>
          <button @click='decrement'>-1</button>
        </div>
      `,
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

可以发现Vue开发更简洁。

声明式和命令式

MVVM模型

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

通常情况下，我们也经常称Vue是一个MVVM的框架。
Vue官方其实有说明，Vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的。

在上面使用createApp的时候，我们传入了一个对象，接下来我们详细解析一下之前传入的属性分别代表什么含义。

template属性

template属性：表示的是Vue需要帮助我们渲染的模板信息。

Vue提供了两种方式解决上面说的问题：

template写法

方式一：使用script标签

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

方式二：使用template（推荐）

<template id="why">
  <div>
    <h2>{{message}}</h2>
    <h2>{{counter}}</h2>
    <button @click='increment'>+1</button>
    <button @click='decrement'>-1</button>
    <button @click="btnClick">按钮</button>
  </div>
</template>

这个时候，在createApp的对象中，我们需要传入的template以 # 开头，如果字符串是以 # 开始，那么它将被用作 querySelector，并且使用匹配元素的 innerHTML 作为模板字符串。

data属性

data属性是传入一个函数，并且该函数需要返回一个对象。

data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理。

methods属性

methods属性是一个对象，通常我们会在这个对象中定义很多的方法，这些方法可以被绑定到 template 模板中，在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性。

对于有经验的同学，在这里我提一个问题，官方文档有这么一段描述：
问题一：为什么不能使用箭头函数（官方文档有给出解释）？
问题二：不使用箭头函数的情况下，this到底指向的是什么？（可以作为一道面试题）

① 问题一：不能使用箭头函数？

我们在methods中要使用data返回对象中的数据，那么这个this是必须有值的，并且应该可以通过this获取到data返回对象中的数据。

那么我们这个this能不能是window呢？
不可以是window，因为window中我们无法获取到data返回对象中的数据，但是如果我们使用箭头函数，那么这个this就会是window了。

为什么是window呢？
这里涉及到箭头函数使用this的查找规则，它会在自己的上层作用于中来查找this，最终刚好找到的是script作用于中的this，所以就是window。

this到底是如何查找和绑定的呢？
在coderwhy的公众号有另外一篇文章，专门详细的讲解了this的绑定规则：https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA，认真学习之后你绝对对this的绑定一清二楚。

② 问题二：this到底指向什么？

事实上Vue的源码当中就是对methods中的所有函数进行了遍历，并且通过bind绑定了this：

其他属性

当然，这里还可以定义很多其他的属性，我们会在后续进行讲解，比如props、computed、watch、emits、setup等等。也包括很多的生命周期函数，不用着急，我们会一个个学习它们的。

Vue的源码

如果想要学习Vue3的源码，比如看createApp的实现过程，应该怎么办呢？

  1. 在GitHub上搜索 vue-next（Vue3在github上叫vue-next），根据Tags下载非beta版本最新的源代码，这里推荐通过 git clone 的方式下载。
  2. 安装Vue源码项目相关的依赖：执行 yarn install
  3. 对项目执行打包操作：执行yarn dev（执行前修改脚本）
  1. 通过packages/vue/dist/vue.global.js调试代码

VSCode代码片段

我们在前面练习Vue的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。

具体的步骤如下：
第一步，复制自己需要生成代码片段的代码；
第二步，https://snippet-generator.app/在该网站中生成代码片段；
第三步，在VSCode中配置代码片段；

代码片段过程：

上一篇 下一篇

猜你喜欢

热点阅读