Vue3的基本使用

68 阅读13分钟

本文整理来自深入Vue3+TypeScript技术栈-coderwhy大神新课,只作为个人笔记记录使用,请大家多支持王红元老师。

认识Vue

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

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

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

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

谁是最好的前端框架?

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

  • 找后端的工作:优先推荐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了

目前需要学习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就可以理解为分布在每个县城的火车票代售点,用户在浏览网站的时候,CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求,这样海南移动用户的请求就不会千里迢迢跑到北京电信机房的服务器(假设源站部署在北京电信机房)上了。

CDN的优势很明显:

  1. CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低;
  2. 大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源站的负载。

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

  • 自己的CDN服务器:需要购买自己的CDN服务器,目前阿里、 腾讯、亚马逊、Google等都可以购买CDN服务器。
  • 开源的CDN服务器:国际上使用比较多的是unpkg、 JSDelivr、cdnjs。

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开发更简洁。

命令式和声明式

  • 原生开发和Vue开发的模式和特点。 我们会发现是完全不同的,这里其实涉及到两种不同的编程范式:命令式编程和声明式编程。 命令式编程关注的是 “how to do”,声明式编程关注的是 “what to do”,由框架(机器)完成 “how”的过程。
  • 在原生的实现过程中,我们是如何操作的呢? 我们每完成一个操作,都需要通过JavaScript编写一条代码,来给浏览器一个指令;这样的编写代码的过程,我们称之为命令式编程;在早期的原生JavaScript和jQuery开发的过程中,我们都是通过这种命令式的方式在编写代码的。
  • 在Vue的实现过程中,我们是如何操作的呢? 我们会在createApp传入的对象中声明需要的内容,模板template、数据data、方法methods,这样的编写代码的过程,我们称之为是声明式编程。目前Vue、React、Angular的编程模式,我们称之为声明式编程,现在的SwiftUI也是声明式编程。

MVVM模型

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

  • MVC是Model – View –Controller的简称,是在前期被使用非常框架的架构模式,比如iOS、前端
  • MVVM是Model-View-ViewModel的简称,是目前非常流行的架构模式

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

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

template属性

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

  • 目前我们看到它里面有很多的HTML标签,这些标签会替换掉我们挂载到的元素(比如id为app的div)的innerHTML
  • 模板中有一些奇怪的语法,比如 {{}},比如 @click,这些都是模板特有的语法,但是这个模板的写法有点过于别扭了,并且IDE没有任何提示,阻碍我们编程的效率

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

  • 方式一:使用script标签,并且标记它的类型为 x-template,设置id
  • 方式二:使用任意标签(通常使用template标签,因为不会被浏览器渲染),设置id template元素是一种用于保存客户端内容的机制,该内容再加载页面时不会被呈现,但随后可以在运行时使用JavaScript实例化。

template写法

方式一:使用script标签(不推荐)

<!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 type="x-template" id="why">
    <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: '#why',
      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>

方式二:使用template(推荐)

<!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>

  <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>

  <script src="../js/vue.js"></script>
  <script>
    Vue.createApp({
      template: '#why',
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },
      // 定义各种各样的方法
      methods: {
        increment() {
          console.log("点击了+1");
          this.counter++;
        },
        decrement() {
          console.log("点击了-1");
          this.counter--;
        },
        btnClick: () => {
          // this === window? 不可以
          // 写成一个箭头函数时, 这个this就是window
          // 在箭头函数中是不绑定this, 但是函数中如果使用了this
          console.log(this);
        },
        btn2Click: function() {
          // this === window? 不可以
          // 写成一个箭头函数时, 这个this就是window
          // 在箭头函数中是不绑定this, 但是函数中如果使用了this
          console.log(this);
        }
      }
    }).mount('#app');

  </script>
</body>
</html>

这个时候,在createApp的对象中,我们需要传入的template以 # 开头,其实vue内部就是执行document.querySelector("#why")找到对应的元素当做模板。

data属性

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

  • 在Vue2.x的时候,也可以传入一个对象(虽然官方推荐是一个函数)
  • 在Vue3.x的时候,必须传入一个函数,否则就会直接在浏览器中报错

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

  • 所以我们在template中通过 {{counter}} 访问counter,可以从对象中获取到数据
  • 所以我们修改counter的值时,template中的 {{counter}}也会发生改变
  • 具体这种响应式的原理,我们后面会有专门的篇幅来讲解。

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的绑定规则:mp.weixin.qq.com/s/hYm0JgBI2…

② 问题二:this到底指向什么?

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

vue源码会遍历methods中的方法,然后给其绑定this为publicThis(bind(publicThis)),publicThis指向的是实例的代理,也就是vue实例中的data对象。

其他属性

当然,这里还可以定义很多其他的属性,我们会在后续进行讲解,比如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中的代码片段有固定的格式,所以我们一般会借助于一个在线工具来完成。

具体的步骤如下:

  1. 复制自己需要生成代码片段的代码;
  2. snippet-generator.app/ 网站中生成代码片段;
  3. 在VSCode中配置代码片段;

代码片段过程: