vue3.0Vue3.0 在去年9月正式发布了，也有许多小伙伴都热情的拥抱Vue3.0。去年 年底我们新项目使用Vue3.0来开发，这篇文章就是在使用后的一个总结， 包含Vue3新特性的使用以及一些用法上的变更。

使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有数据都是定义在中，方法定义在中的，并且使用来调用对应的数据和方法。那 Vue3.x 中就可以不这么玩了， 具体怎么玩我们后续再说， 先说一下 Vue2.x 版本这么写有什么缺陷，所有才会进行升级变更的。

回顾 Vue2.x 实现加减

上面代码只是实现了对的加减以及显示倍数， 就需要分别在 data、methods、computed 中进行操作，当我们增加一个需求，就会出现下图的情况：

当我们业务复杂了就会大量出现上面的情况， 随着复杂度上升，就会出现这样一张图， 每个颜色的方块表示一个功能：

甚至一个功能还有会依赖其他功能，全搅合在一起。

当这个组件的代码超过几百行时，这时增加或者修改某个需求， 就要在 data、methods、computed 以及 mounted 中反复的跳转，这其中的的痛苦写过的都知道。

那我们就想啊， 如果可以按照逻辑进行分割，将上面这张图变成下边这张图，是不是就清晰很多了呢, 这样的代码可读性和可维护性都更高：

那么 vue2.x 版本给出的解决方案就是 Mixin, 但是使用 Mixin 也会遇到让人苦恼的问题：

1. 命名冲突问题
2. 不清楚暴露出来的变量的作用
3. 逻辑重用到其他 component 经常遇到问题

关于上面经常出现的问题我就不一一举例了，使用过的小伙伴多多少少都会遇到。文章的重点不是 Mixin, 如果确实想知道的就留言啦~

所以，我们 Vue3.x 就推出了主要就是为了解决上面的问题，将零散分布的逻辑组合在一起来维护，并且还可以将单独的功能逻辑拆分成单独的文件。接下来我们就重点认识。

在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 的入口。

setup 执行时机

我在学习过程中看到很多文章都说 setup 是在 和之间， 这个结论是错误的。实践是检验真理的唯一标准， 于是自己去检验了一下：

setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。

setup 参数

使用时，它接受两个参数：

1. props: 组件传入的属性
2. context

setup 中接受的是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示例， 这段代码会让 props 不再支持响应式：

那在开发中我们想要使用解构，还能保持的响应式，有没有办法解决呢？大家可以思考一下，在后面学习的地方为大家解答。接下来我们来说一下接受的第二个参数，我们前面说了中不能访问 Vue2 中最常用的对象，所以中就提供了中最常用的三个属性：、 和，分别对应 Vue2.x 中的 属性、插槽 和发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

在 vue2.x 中， 定义数据都是在中， 但是 Vue3.x 可以使用和来进行数据定义。那么和他们有什么区别呢？分别什么时候使用呢？说到这里，我又不得不提一下，看到很多网上不少文章说 (用于处理对象的双向绑定，则处理 js 基础类型的双向绑定)。我其实不太赞同这样的说法，这样很容易初学者认为就能处理 js 基本类型， 比如也是可以定义对象的双向绑定的啊， 上段代码：

讯享网

我们将和绑定到页面上也是可以的；但是函数确实可以代理一个对象， 但是不能代理基本类型，例如字符串、数字、boolean 等。接下来使用代码展示一下、的使用：

运行效果: 

上面的代码中，我们绑定到页面是通过,；这样写感觉很繁琐，我们能不能直接将中的属性解构出来使用呢? 答案是不能直接对进行结构， 这样会消除它的响应式， 这里就和上面我们说不能使用 ES6 直接解构就呼应上了。那我们就想使用解构后的数据怎么办，解决办法就是使用。toRefs 用于将一个 reactive 对象转化为属性全部为 ref 对象的普通对象。具体使用方式如下：

我们可以直接看生命周期图来认识都有哪些生命周期钩子 (图片是根据官网翻译后绘制的)：

从图中我们可以看到 Vue3.0 新增了，这个在前面我们也详细说了， 然后是将 Vue2.x 中的名称变更成; 表更为 ，作者说这么变更纯粹是为了更加语义化，因为一个组件是一个和的过程。其他 Vue2 中的生命周期仍然保留。上边中并没包含全部的生命周期钩子， 还有其他的几个， 全部生命周期钩子如图所示：

我们可以看到和被替换了（但是 Vue3 中你仍然可以使用， 因为 Vue3 是向下兼容的， 也就是你实际使用的是 vue2 的）。其次，钩子命名都增加了; Vue3.x 还新增用于调试的钩子函数和下面我们简单使用几个钩子， 方便大家学习如何使用，Vue3.x 中的钩子是需要从 vue 中导入的：

关于生命周期相关的内容就介绍到这里，下面我们介绍一下 Vue3.x 中有什么不同。

watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是惰性的，也就是说仅在侦听的源数据变更时才执行回调。

参数说明：

• source: 可以支持 string,Object,Function,Array; 用于指定要侦听的响应式变量
• callback: 执行的回调函数
• options：支持 deep、immediate 和 flush 选项。

接下来我会分别介绍这个三个参数都是如何使用的， 如果你对 watch 的使用不明白的请往下看：

侦听 reactive 定义的数据

讯享网

侦听 ref 定义的数据

侦听多个数据

上面两个例子中，我们分别使用了两个 watch, 当我们需要侦听多个数据源时， 可以进行合并， 同时侦听多个数据：

侦听复杂的嵌套对象

我们实际开发中，复杂数据随处可见， 比如：

如果不使用第三个参数， 是无法监听到数据变化的。前面我们提到，默认情况下，watch 是惰性的, 那什么情况下不是惰性的， 可以立即执行回调函数呢？其实使用也很简单， 给第三个参数中设置即可。关于配置，还在学习，后期会补充

stop 停止监听

我们在组件中创建的监听，会在组件被销毁时自动停止。如果在组件销毁之前我们想要停止掉某个监听， 可以调用函数的返回值，操作如下：

讯享网

还有一个监听函数, 在我看来已经能满足监听的需求，为什么还要有呢？虽然我没有 get 到它的必要性，但是还是要介绍一下，首先看看它的使用和究竟有何不同。

执行结果首先打印一次和值；然后每隔一秒，打印和值。从上面的代码可以看出， 并没有像一样需要先传入依赖，会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。所以总结对比如下：

1. watchEffect 不需要手动传入依赖
2. watchEffect 会先执行一次用来自动收集依赖
3. watchEffect 无法获取到变化前的值， 只能获取变化后的值

上面介绍了 Vue3 的部分内容, 还有很多非常好用的 API, 建议直接查看官网 composition-api。其实我们也能进行自定义封装。

开篇的时候我们使用 Vue2.x 写了一个实现加减的例子， 这里可以将其封装成一个 hook, 我们约定这些「自定义 Hook」以 use 作为前缀，和普通的函数加以区分。  实现：

接下来看一下在组件中使用这个 :

开篇 Vue2.x 实现，分散在,,等， 如果刚接手项目，实在无法快速将字段和关联起来，而 Vue3 的方式可以很明确的看出，将 count 相关的逻辑聚合在一起， 看起来舒服多了， 而且还可以扩展更多的功能。项目开发完之后，后续还会写一篇总结项目中使用到的「自定义 Hooks 的文章」，帮助大家更高效的开发， 关于和自定义 Hooks 就介绍到这里， 接下来简单介绍一下 vue2.x 与 vue3 响应式对比。

其实在 Vue3.x 还没有发布 bate 的时候， 很火的一个话题就是。没有无缘无故的爱，也没有无缘无故的恨。为何要将换掉呢，咋们可以简单聊一下。我刚上手 Vue2.x 的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用更新，什么时候用强制更新，你是否也一度陷入困境。后来的学习过程中开始接触源码，才知道一切的根源都是 。对这块想要深入了解的小伙伴可以看这篇文章 为什么 Vue3.0 不再使用 defineProperty 实现数据监听？要详细解释又是一篇文章，这里就简单对比一下 与 Proxy

1. 只能劫持对象的属性， 而 Proxy 是直接代理对象

由于只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是 Proxy 直接代理对象， 不需要遍历操作

讯享网

2. 对新增属性需要手动进行

因为劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用进行劫持。也就是 Vue2.x 中给数组和对象新增属性时，需要使用才能保证新增的属性也是响应式的, 内部也是通过调用去处理的。

Teleport 是 Vue3.x 新推出的功能， 没听过这个词的小伙伴可能会感到陌生；翻译过来是的意思，可能还是觉得不知所以，没事下边我就给大家形象的描述一下。

Teleport 就像是哆啦 A 梦中的「任意门」，任意门的作用就是可以将人瞬间传送到另一个地方。有了这个认识，我们再来看一下为什么需要用到 Teleport 的特性呢，看一个小例子：在子组件中使用到组件，我们实际开发中经常会在类似的情形下使用到 ，此时就被渲染到一层层子组件内部，处理嵌套组件的定位、和样式都变得困难。从用户感知的层面，应该是一个独立的组件，从 dom 结构应该完全剥离 Vue 顶层组件挂载的 DOM；同时还可以使用到 Vue 组件内的状态（或者）的值。简单来说就是,即希望继续在组件内部使用, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中。此时就需要 Teleport 上场，我们可以用包裹, 此时就建立了一个传送门，可以将渲染的内容传送到任何指定的地方。接下来就举个小例子，看看 Teleport 的使用方式

我们希望 Dialog 渲染的 dom 和顶层组件是兄弟节点关系, 在文件中定义一个供挂载的元素:

讯享网

定义一个组件, 留意  属性， 与上面的选择器一致：

最后在一个子组件中使用组件, 这里主要演示 Teleport 的使用，不相关的代码就省略了。组件

Dom 渲染效果如下：

图片. png可以看到，我们使用 组件，通过 属性，指定该组件渲染的位置与 同级，也就是在 下，但是 的状态 又是完全由内部 Vue 组件控制.

是 Vue3.x 中新增的特性， 那它有什么用呢？别急，我们通过 Vue2.x 中的一些场景来认识它的作用。Vue2.x 中应该经常遇到这样的场景：

在前后端交互获取数据时， 是一个异步过程，一般我们都会提供一个加载中的动画，当数据返回时配合来控制数据显示。如果你使用过这个插件来完成上面的需求， 你对可能不会陌生，Vue3.x 感觉就是参考了.Vue3.x 新出的内置组件, 它提供两个 slot, 刚开始会渲染一个 fallback 状态下的内容， 直到到达某个条件后才会渲染 default 状态的正式内容， 通过使用组件进行展示异步渲染就更加的简单。:::warning 如果使用 , 要返回一个 promise ::: 组件的使用：

讯享网

:

从上面代码来看， 只是一个带插槽的组件，只是它的插槽指定了 和  两种状态。

在 Vue2.x 中， 中只允许有一个根节点：

但是在 Vue3.x 中，你可以直接写多个根节点， 是不是很爽：

Vue3.x 在考虑到 的基础上重构了全局和内部 API, 表现结果就是现在的全局 API 需要通过 的引用方式进行具名引用， 比如在 Vue2.x 中，我们要使用 :

讯享网

是一个从 Vue 对象直接暴露出来的全局 API，其实 只是 的一个简易包装，只是为了方便而把后者的回调函数的 绑定到了当前的实例。虽然我们借助的, 但是不管我们实际上是否使用, 最终都会进入我们的生产代码， 因为 Vue 实例是作为单个对象导出的， 打包器无法坚持出代码总使用了对象的哪些属性。在 Vue3.x 中改写成这样：

这是一个比较大的变化， 因为以前的全局 API 现在只能通过具名导入，这一更改会对以下 API 有影响：

• （用 替换）
• （仅限完整版本时可用）
• （仅在 2.x 兼容版本中可用）
• （与上同）

出来上面的 API 外， 还有许多内置的组件以上仅适用于 builds，用于支持 tree-shaking 的绑定器——UMD 构建仍然包括所有特性，并暴露 Vue 全局变量上的所有内容 (编译器将生成适当的输出，以使用全局外的 api 而不是导入)。:::前面都是 Vue3.0 的一些新特性，后面着重介绍一下相对于 Vue2.x 来说， 有什么变更呢？

在 Vue2.x 中， 具名插槽的写法：

在父组件中使用：

如果我们要在 slot 上面绑定数据，可以使用作用域插槽，实现如下：

讯享网

在 Vue2.x 中具名插槽和作用域插槽分别使用和来实现， 在 Vue3.0 中将和进行了合并同意使用。Vue3.0 中：

首先回顾一下 Vue 2 中实现一个自定义指令：

在 Vue 2 中， 自定义指令通过以下几个可选钩子创建：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已**入文档中)。
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

在 Vue 3 中对自定义指令的 API 进行了更加语义化的修改， 就如组件生命周期变更一样， 都是为了更好的语义化， 变更如下：

所以在 Vue3 中， 可以这样来自定义指令：

讯享网

然后可以在模板中任何元素上使用新的 指令， 如下：

在使用 Vue 3 之前就了解到 发生了很大的变化， 使用过了之后才真正的 get 到这些变化， 我们先纵观一下发生了哪些变化， 然后再针对的说一下如何使用：

• 变更：在自定义组件上使用时， 属性以及事件的默认名称变了
• 变更：的修饰符在 Vue 3 中又被去掉了, 合并到了里
• 新增：同一组件可以同时设置多个
• 新增：开发者可以自定义 修饰符

有点懵？别着急，往下看 在 Vue2 中， 在组件上使用 其实就相当于传递了属性， 并触发了事件：

这时只能绑定在组件的属性上，那我们就不开心了， 我们就像给自己的组件用一个别的属性，并且我们不想通过触发来更新值，在出来之前，Vue 2 中这样实现：

修改后， searchInput 组件使用就相当于这样：

讯享网

但是在实际开发中，有些场景我们可能需要对一个 prop 进行 “双向绑定”， 这里以最常见的 modal 为例子：modal 挺合适属性双向绑定的，外部可以控制组件的显示或者隐藏，组件内部关闭可以控制 属性隐藏，同时 visible 属性同步传输到外部。组件内部， 当我们关闭时, 在子组件中以 update:PropName 模式触发事件：

然后在父组件中可以监听这个事件进行数据更新：

此时我们也可以使用来简化实现：

上面回顾了 Vue2 中实现以及组件属性的双向绑定，那么在 Vue 3 中应该怎样实现的呢？在 Vue3 中, 在自定义组件上使用, 相当于传递一个 属性， 同时触发一个事件：

讯享网

如果要绑定属性名， 只需要给传递一个参数就行, 同时可以绑定多个：

不知道你有没有发现，这个写法完全没有什么事儿了， 所以啊，Vue 3 中又抛弃了写法， 统一使用

Vue3 中 使用 定义异步组件，配置选项 替换为 ,Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise，用法如下：

• vue3 全家桶入门指南
• 学习一波 Vue3 新特性
• Vue3.0 新特性以及使用变更总结(实际工作用到的)
• 了不起的 Vue3

微信改了推送机制，真爱请星标本公号❤️