Vue3 新特性 | Leeson's Space

type

status

date

slug

summary

Vue3 与 Vue2

Vue2 结构

熟悉Vue2的读者应该知道，我们一般会在data中定义数据，在methods中声明方法，通过this调用需要的数据和方法。

想必大家和笔者一样也感受到了，当.vue文件中功能复杂、代码过长时，我们需要在template、data、methods之间来回切换，甚是烦躁 😤

当然，还不止于此！不知大家是否在工作中用过mixins。不可否认，mixins有它的优点和好处，但不足也很明显：

命名易冲突

未知的数据来源，调试起来很酸爽 😵

……

大概是基于以上的问题，Vue3诞生了 👏 推出了Composition API

Vue3 诞生

Vue3推出的Composition API，不仅可以把零散的逻辑组合在一起，还能将独立的功能逻辑拆分成单独的文件。下面，我就来隆重的介绍它

setup

这是Vue3新增的一个特性，是作为Composition API的入口。结构如下：

setup执行的时机，网上说法不一。不过通过笔者的测试发现，setup执行的时机在beforeCreate生命周期之前，读者也可通过下方代码进行自测：🤔

setup可以接收两个参数props和context，如上方代码。我们简单来说说这两个属性：

props：父子组件之间通过prop所传的值。直接上代码：

那么，通过setup中的props参数就可以拿到上面传入的num和obj属性，从而进行相关的逻辑操作

Tips：props不能使用 ES6 解构，这样解构出的数据会失去响应式。如果我们既想要解构，又想要其保持响应式，怎么办？别怕，Vue3提出了toRefs函数，我们会在后面学习它

context：可替代Vue2中的this

我们在Vue2中，会频繁使用到this。但是，在Vue3中，不能使用this。所以，context中提供了最常用的几个属性：emit、slot，使用如下：

ref、reactive、toRefs

在Vue2中，我们通常把数据定义在data中，而且我们知道，定义在data中的数据通常是响应式的。那么，我们在Vue3中该怎么定义数据呢？ref、reactive由此而生。一般来说，ref定义js基础类型的双向绑定；而reactive则定义对象类型的双向绑定。用法如下：

相信读者们也发现了，当我们用reactive定义了对象类型，同时需要在模版中使用时，都需要data.某个属性，数据量大的时候还是蛮繁琐的。同上文提到的props一样，我们不能直接解构，不然会失去响应式。因此，Vue3提出了toRefs函数。通过toRefs将reactive定义的对象类型里的属性全部转为ref定义的基础类型。上述代码可做如下修改：

computed

直接上代码，感受一下Vue3中的computed

filters

在vue2中有过滤器filters，可以很方便的对一些数据进行简单的二次操作，如时间格式化等。但在vue3中，vue团队移除了过滤器的概念，并用computed去代替过滤器filters的功能

watch

监听ref定义的数据

监听reactive定义的数据

Vue3中依旧保留了deep、immediate关键字，如下代码

生命周期

Vue2和Vue3的生命周期还是有点区别的，直接将官网的说明拿过来 🤲

结语

Vue3中的特性就先介绍到这边。除了上述介绍的特性外，Vue3中还有很多的新特性，如watchEffect、自定义Hooks、Teleport等。由于笔者未频繁使用到这些特性，就先不做记录，之后使用到了或是学习了在陆续更新吧～