邂逅Vue3开发

作者: Imkata | 来源:发表于2022-04-25 14:41 被阅读0次

邂逅Vue3开发
原生 js 事件绑定
搭建Vue3源码的开发环境
头条小功能api组件与微信对比表
H5调起原生APP
docker 搭建 vue3 + vite
vue3和vite双向加持，uni-app性能再次提升
如何判断H5页面是否在WEB容器中打开
前端如何获取到手机客户端当前的网络状况信息？
架构原生APP内嵌H5页面

认识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带来的变化

① 源码

源码通过monorepo的形式来管理源代码
- Mono：单个，Repo：repository仓库，主要是将许多项目的代码存储在同一个repository中
- 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理，而且模块划分的更加清晰，可维护性、可扩展性更强
源码使用TypeScript来进行重写
- 在Vue2.x的时候，Vue使用Flow来进行类型检测
- 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了

② 性能

使用Proxy进行数据劫持
- 在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的。这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的。所以在Vue2.x的时候，不得不提供一些特殊的API，比如$set或$delete，事实上都是一些hack方法，也增加了开发者学习新的API的成本。
- 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到。
删除了一些不必要的API
- 移除了实例上的$on, $off 和 $once；
- 移除了一些特性：如filter、内联模板等；
包括编译方面的优化
- 生成Block Tree、Slot编译优化、diff算法优化；

③ 新的API

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

方式二：下载和引入

下载Vue的源码
可以直接打开CDN的链接，复制其中所有的代码，创建一个新的文件，比如vue.js，将代码复制到其中。
通过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标签

<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属性是传入一个函数，并且该函数需要返回一个对象。

在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的绑定规则：https://mp.weixin.qq.com/s/hYm0JgBI25grNG_2sCRlTA，认真学习之后你绝对对this的绑定一清二楚。

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

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

其他属性

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

Vue的源码

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

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

通过packages/vue/dist/vue.global.js调试代码

VSCode代码片段

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

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

代码片段过程：

邂逅Vue3开发
认识Vue Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，全称是Vue.j...
原生 js 事件绑定
源码：更多咨询： 1、Git 汇总2、VUE3、前端开发
搭建Vue3源码的开发环境
最近一直在看Vue3的源码，通过对Vue3的源码分解从头搭建出Vue3源码开发环境，需要梳理的东西还很多，现在将整...
头条小功能api组件与微信对比表
更多咨询请关注：1、Git 汇总2、VUE3、前端开发
H5调起原生APP
代码：更多咨询请关注：1、Git 汇总2、VUE3、前端开发
docker 搭建 vue3 + vite
vue3发布了,今天就分享一下我使用docker 搭建 vue3 + vite 开发环境。至于为什么使用docke...
vue3和vite双向加持，uni-app性能再次提升
uni-app对vue3 & Vite的升级，是一个渐进式过程： 2020年9月：小程序平台支持 vue3 开发，...
如何判断H5页面是否在WEB容器中打开
代码如下：更多咨询请关注：1、Git 汇总2、VUE3、前端开发
前端如何获取到手机客户端当前的网络状况信息？
相关事例：更多咨询请关注：1、Git 汇总2、VUE3、前端开发
架构原生APP内嵌H5页面
架构图：更多咨询请关注：1、Git 汇总2、VUE3、前端开发