再不学vue3就没有人要你了!速来围观vue3

简介: 这篇技术文章介绍了作者从最初对学习 Vue3 抵触到最终决定投入学习的心路历程,展示了 Vue3 相较于 Vue2 的诸多改进和新特性,如更优的性能、更小的代码体积及更佳的 TypeScript 支持。文章重点阐述了 Vue3 中 createApp 的使用变化、emits 机制、多事件处理、Fragment 的引入等重要功能升级。此外,还深入探讨了 Composition API 和 Options API 的区别,强调 Composition API 在代码组织和逻辑复用方面的优势,并给出了在不同项目规模中选择合适 API 的建议。

紧跟新技术的步伐,周一也开始学起了 vue3 。去年11月份的时候对 vue3 其实已经有所耳闻,但当时对 vue3 完全没有想学习的欲望。当时就觉得,够用就行,新技术那么多哪里学得动。然而现在……悔不当初😭,时代在推你进步,你却停滞不前,只会被时代淘汰。迫于内卷压力,再不学 vue3 真的感觉在跟时代划一道鸿沟。

所以,今年赶忙把 vue3 提上日程。原本 vue3 的学习计划是在三月份,但因为各种事情耽搁了到了现阶段才进行。

求求别再卷了……我学❗❗我学❗❗

在今天的这篇文章中,将带领大家全面了解 vue3 的新特性,vue3 与 vue2 的一些区别, Composition API 和 Options API 的区别。

下面开始进行本文的讲解🤪

一、😶vue3比vue2有什么优势?
vue3比vue2来说,性能上更好,代码体积更小,并且有更好的ts支持。

同时,更为突出的特点是,vue3有更好的代码组织能力,有更好的逻辑抽离能力,并且还有更多各式各样的新功能。

其中尤为突出的就是大家平常耳熟能详的 Composition API 和 Options API 。

那是不是 vue3 就一定比 vue2 好呢?或者是 Composition API 就一定比 Options API 好呢?

其实大家心里可能在此打下了一个问号⁉️

那接下来就带着这个问号,一起来了解 vue3 的新特性吧!

二、🧐Vue3升级了哪些重要的功能
1、createApp
与 vue2 不同的是, vue2 使用 new 的方式来初始化一个实例,而 vue3 则用 Vue.createApp 来初始化一个实例。如下所示:

//vue2.x 实例化方式
const app = new Vue({
/选项/ })
//vue2.x 使用方式
Vue.use(/.../)
Vue.mixin(/.../)
Vue.component(/.../)
Vue.directive(/.../)

//vue3 实例化方式
const app = Vue.createApp({
/选项/ })
//vue3 使用方式
app.use(/.../)
app.mixin(/.../)
app.component(/.../)
app.directive(/.../)
2、emits(父子组件间的通信)
(1)通信方式
传递形式 通信方式
emits 子组件向父组件传递数据
props 父组件的数据需要通过props把数据传给子组件,props的取值可以是数组也可以是对象
(2)举个例子🌰
在 vue2的时候,我们可以用 $emit 和 props 来进行父子组件间的通信。而现在, vue3 使用 emits 和 props 来实现父子组件间的通信。

我们定义一个父组件, 名字叫 App.vue ,具体代码如下:




再定义一个子组件,名字叫 HelloWorld.vue ,具体代码如下:


{
{ msg }}



此时浏览器的显示效果如下:

emits

在 vue3 中,可以直接将 emit 参数传入 setup 生命周期里面,来达到父子组件的通信。

3、多事件处理
在 vue2 时,每一个点击只能定义一个事件;而在 vue3 时,打破原有的规则,每一个 @click 可以点击多个事件。如下代码所示:


4、Fragment
fragment ,中文翻译过来就是碎片的意思。

在 vue2.x 时,是不允许有碎片存在的。所以我们每次在写程序时,最外层总要再给它包个 div 。但这个时候就会感觉特别麻烦,因为有时候想这个 div 的 class 名还得思考给命个什么名字好,感觉心里都已经没墨水了。

因此,在 vue3 时,就除去了这个规范,可以不用最外层再包个 div 。如下代码所示:




{
{ title }}







{
{title}}




5、移除.sync
(1)vue2
在 vue2 时,我们会通过 v-bind:title.sync 来进行数据双向绑定。具体代码如下:



(2)vue3
而在 vue3 时,直接放弃掉 .sync 而使用 v-model 的形式来对数据进行绑定。具体代码对下:



我们再用一个例子🌰来展示 vue3 是怎么对数据进行双向绑定的。具体代码如下:

我们先定义一个子组件,名字叫 UserInfo.vue ,具体代码如下:







再来定义一个父组件,名字叫 index.vue ,具体代码如下:


{
{name}} {
{age}}







此时浏览器的显示效果如下:
v-model
此时,我们可以得出结论:子组件通过控制 :value 和 @input 来控制input的值,同时父组件通过 v-model:propertyName 来绑定子组件的值,这样一来,两者就实现了双向数据绑定。

6、异步组件
在 vue2 时,引入异步组件的方法比较简单,直接使用import即可。代码如下:

new Vue({

//…
components:{

'my-component': () => import('./my-async-component.vue')
}
})
而在 vue3 时,引入异步组件需要使用 defineAsyncComponent 方法来进行引入。代码如下:

import {
createApp, defineAsyncComponent } from 'vue'

new Vue({

//…
components:{

AsyncComponent: defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
}
})
7、移除filter
在 vue2 时,有 filter 这个功能,但其实这个功能的使用频率还挺低的。所以,在 vue3 中,彻底去除了 filter 这个功能,不再可用。



{
{ message | capitalize }}



8、Teleport
Teleport ,中文翻译过来就是远距离传送。在 vue2 中,比如我们要定义点击某个按钮,去跳转一个模态框,这个时候一般需要去操作 DOM 元素,或者再定义一个新的组件。但是在 vue3 ,我们可以用 teleport 来解决。我们可以使用 teleport 来直接定义在当前组件中,之后通过v-if等方式来控制其显示与否。演示代码如下:





9、Suspense
Suspense,是对vue2.x中的插槽做一个封装,这里不进行一一讲解。下面给出代码演示:




<!-- #fallback就是一个具名插槽。即Suspense组件内部,有两个slot,其中一个具名为 fallback -->
<template #fallback>
    Loading...
</template>


三、😜Options API 和 Composition API
1、生命周期对比
以下给出 Vue2 与 Vue3 生命周期的对比。

Vue2生命周期(Options API) Vue3生命周期(Composition API) 含义
beforeCreate setup 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用
created setup 页面还没有渲染,但是vue的实例已经初始化结束。
beforeMount onBeforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted onMounted 页面已经渲染完毕。
beforeUpdate onBeforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated onUpdated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
beforeDestory onBeforeUnmount 实例销毁之前调用。在这一步,实例仍然完全可用。
destroy onUnmounted Vue 实例销毁后调用。
2、Composition API 和 Options API 对比
(1)Composition API带来了什么?
Composition API 相较于 Options API 来说,拥有更好的代码组织能力,更好的逻辑复用能力,以及更好的类型推导。

这里引用大帅老师的几张动图来对 Composition API 和 Options API 做一个对比。原文搓👉做了一夜动画,就为让大家更好的理解Vue3的Composition Api,再悄悄告诉各位小伙伴,大帅老师的文章融入大量的动画,通俗易懂,路过的小伙伴赶紧关注一波哦,学习路上不迷路🚦

废话不多说,赶紧来 Options API 和 Composition API 的区别。

Options API:

options API
options API

Composition API:

composition API
composition API

从上图中可以看到,对于 Options API 来说,它的逻辑是散落在各处的,懒懒散散的。假设我们现在有一个功能要实现,而这个功能的逻辑代码有2000-3000行,试想一下,如果我们用 Options API 来实现的话,假设这个功能在 methods 里面有定义了一个方法,然后呢又要滑动一两千行去 mounted 里面看挂载的内容,这真的是出奇的浪费时间呐!所以, vue3 提出了 composition API ,就来解决这个问题了。

composition API 把代码的逻辑抽离出来封装,并把封装的内容直接引用到生命周期里面,这样使用起来真的方便太多了。

我们举个简单的例子来看看 composition API 的使用方式。如下代码所示:

抽离某个逻辑放在同一个函数上:

function sum(){

let a = ref(10);
let b = computed(() => {

    return a.value * 2
})

const handleSum = () => {

    a.value = a.value + b
}

return {

    a,
    b,
    handleSum
}

}
将sum函数逻辑放在组件中使用:

//代码效果参考:https://www.257342.com/sitemap.xml
//代码效果参考:http://www.92demo.com
//代码效果参考:http://www.ningluan.com
export default defineComponent({

setup(){

    const {
a, b, handleSum } = sum();
    return {

        a,
        b,
        handleSum
    }
}

})
综上可以得出,对于一个项目来说,尤其是代码量越多,逻辑越复杂的, Composition API 的优势会更加明显。那对于一个项目来说,我们应该在这两者中如何抉择而选择更好的方案呢? 接着我们继续往下看。

(2)Composition API和Options API如何选择?
通过上面的分析我们可以知道, Composition API 虽然好用,但也不能乱用。因此,对于 Composition API 和 Options API 的使用,主要有以下几点建议:

两者不建议共用,不然很容易引起混乱;
对于小型项目、或者业务逻辑比较简单的项目,建议使用 Options API ;
对于中大型项目、或者逻辑比较复杂的项目,建议使用 Composition API ,相较于 Options API 来说, Composition API 对大型项目更好一些,逻辑的抽离,代码的复用,使得大型项目得以更好的维护。
(3)别误解Composition API
很多小伙伴在没学 vue3 之前,就依稀有听到 Composition API 的声音,这个时候就会使得很多人觉得,要想学会 Vue3 ,就得先学会 Composition API 。

其实……不是这样的。

Composition API 属于高阶技巧,并不是学基础时必须要会的内容。

正如上面所演示的内容, Composition API 的出现是为了解决复杂业务逻辑而设计,而不是为了学基础而设计的。

所以说,对于小白学 vue3 时,需要先学会 vue3 的基础,再来学 Composition API ,这样的学习路线更为合理。

相关文章
|
18天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
22天前
|
API
vue3知识点:provide 与 inject
vue3知识点:provide 与 inject
29 4
vue3知识点:provide 与 inject
|
22天前
|
API
vue3知识点:readonly 与 shallowReadonly
vue3知识点:readonly 与 shallowReadonly
24 1
vue3知识点:readonly 与 shallowReadonly
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
36 7
|
17天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
39 3
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
37 1
|
18天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
18天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
22天前
|
JavaScript Java API
vue3知识点:setup
vue3知识点:setup
27 5