Vue3.0 在去年9月正式发布了，也有许多小伙伴都热情的拥抱Vue3.0，这篇文章就是在使用后的一个总结， 包含Vue3新特性的使用以及一些用法上的变更。
一 composition API
Composition API的主要思想是，我们将它们定义为从新的 setup 函数返回的JavaScript变量，而不是将组件的功能（例如state、method、computed等）定义为对象属性。
更好的逻辑复用与代码组织，可以通过组合逻辑代码函数取代option式的组合代码
option式组件组合的业务逻辑分散在组件中的各处，需要先关注data,methods,computed,分散在各处的代码。
（下图是官网中对比composition 和 options 组织代码的对比，可以看出composition API 将每个逻辑关注点的代码现在都被组合进了一个组合函数，大大减少了在组件中的代码来回跳转）
可以看出composition API 可以组织和抽取大部分的工具代码，来做代码复用，而不再像option式组件担心多个Mixin之间的数据污染。
图1.0 对比
二 自定义 Hooks
您可以通过在lifecycle钩子前面加上“on”来访问组件的生命周期挂钩。
文章中的表2.0 包含如何在setup（）中调用生命周期挂钩
表2
因为安装程序是围绕beforeCreate和created生命周期挂钩运行的，所以不需要显式定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在setup函数中编写。
这些函数接受当组件调用钩子时将执行的回调：
// MyBook.vue
export default {
setup() {
// mounted
onMounted(() => {
console.log('Component is mounted!')
})
}}
三 生命周期钩子(vue2对比vue3)
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured
四 Teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”
如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用Teleport 就可以方便的解决组件间 css 层级问题。
我们将模态内容包装在 teleport 组件中，还需要指定一个 to 属性，为该属性分配一个查询选择器，以标识目标元素，要使用teleport，首先要在页面上添加一个元素，我们要将模态内容移动到该页面
下面举个例子
在本例中为 #modal-wrapper
继续了解可以看 https://www.jianshu.com/p/e27b3308fc0a
五 Suspense
Suspense组件用于在等待某个异步组件解析时显示后备内容。以前，在Vue2中，我们必须使用条件（例如 v-if 或 v-else）来检查我们的数据是否已加载并显示后备内容。但是现在，Suspense随Vue3内置了，因此我们不必担心跟踪何时加载数据并呈现相应的内容。
Suspense组件是Vue3中的知名功能之一。
它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。
值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入!
Suspense组件到底是什么？
Suspense组件用于在等待某个异步组件解析时显示后备内容。
你可能会想我们会在什么时候使用异步组件？
老实说，超出你的想象。每当我们希望组件等待数据获取时（通常在异步API调用中），我们都可以使用Vue3 Composition API制作异步组件。
详情了解可以访问：https://www.jianshu.com/p/4bc2dfba1ffd
六 Fragment
Fragment是一种可以嵌入在活动中的UI片段，能够让程序更加合理和充分地利用大屏幕的空间，出现的初衷是为了适应大屏幕的平板电脑，可以将其看成一个小型Activity，又称作Activity片段。使用Fragment可以把屏幕划分成几块，然后进行分组，进行一个模块化管理。Fragment不能够单独使用，需要嵌套在Activity中使用，其生命周期也受到宿主Activity的生命周期的影响
详情了解可以访问 ：https://blog.csdn.net/harvic880925/article/details/44917955
七 Tree-shaking
Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为DCE（dead code elimination）。
详情了解可以访问：https://juejin.cn/post/6844903544756109319
八 Vue3 对比 Vue.x变更
未完待续
网友评论