一文全面了解vue3新特性

• 一、😶vue3比vue2有什么優勢？
• 二、🧐Vue3升級了哪些重要的功能
• • 1、createApp
  • 2、emits(父子組件間的通信)
  • • （1）通信方式
    • （2）舉個例子🌰
  • 3、多事件處理
  • 4、Fragment
  • 5、移除.sync
  • • （1）vue2
    • （2）vue3
  • 6、異步組件
  • 7、移除filter
  • 8、Teleport
  • 9、Suspense
• 三、😜Options API 和 Composition API
• • 1、生命周期對比
  • 2、Composition API 和 Options API 對比
  • • （1）Composition API帶來了什么？
    • （2）Composition API和Options API如何選擇？
    • （3）別誤解Composition 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 ，具體代碼如下：

<template><HelloWorld msg="Hello Vue 3.0 + Vite" @onSayHello="sayHello"/> </template><script> import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld,},data() {return {msg: 'hello vue3'} },methods: {sayHello(info) {console.log('hello', info)}} } </script>

再定義一個子組件，名字叫 HelloWorld.vue ，具體代碼如下：

<template><h1>{{ msg }}</h1> </template><script> export default {name: 'HelloWorld',props: {msg: String},data() {return {}},emits: ['onSayHello'],setup(props, { emit }) {emit('onSayHello', 'vue3')} } </script>

此時瀏覽器的顯示效果如下：

在 vue3 中，可以直接將 emit 參數傳入 setup 生命周期里面，來達到父子組件的通信。

3、多事件處理

在 vue2 時，每一個點擊只能定義一個事件；而在 vue3 時，打破原有的規則，每一個 @click 可以點擊多個事件。如下代碼所示：

<!-- 在 methods 里定義 one two 兩個函數 --> <button @click="one($event), two($event)">submit </button>

4、Fragment

fragment ，中文翻譯過來就是碎片的意思。

在 vue2.x 時，是不允許有碎片存在的。所以我們每次在寫程序時，最外層總要再給它包個 div 。但這個時候就會感覺特別麻煩，因為有時候想這個 div 的 class 名還得思考給命個什么名字好，感覺心里都已經沒墨水了。

因此，在 vue3 時，就除去了這個規范，可以不用最外層再包個 div 。如下代碼所示：

<!-- vue2.x 組件模板 --> <template><div class="detail"><h3>{{ title }}</h3><div v-html="content"></div></div> </template> <!-- vue3 組件模板 --> <template><h3>{{title}}</h3><div v-html="content"></div> </template>

5、移除.sync

（1）vue2

在 vue2 時，我們會通過 v-bind:title.sync 來進行數據雙向綁定。具體代碼如下：

<!-- vue2.x --> <MyComponent v-bind:title.sync="title"></MyComponent>

（2）vue3

而在 vue3 時，直接放棄掉 .sync 而使用 v-model 的形式來對數據進行綁定。具體代碼對下：

<!-- vue3.x --> <MyComponent v-model:title="title"></MyComponent>

我們再用一個例子🌰來展示 vue3 是怎么對數據進行雙向綁定的。具體代碼如下：

我們先定義一個子組件，名字叫 UserInfo.vue ，具體代碼如下：

<template><input :value="name" @input="$emit('update:name', $event.target.value)"/><input :value="age" @input="$emit('update:age', $event.target.value)"/> </template><script> export default {name: 'UserInfo',props: {name: String,age: String} } </script>

再來定義一個父組件，名字叫 index.vue ，具體代碼如下：

<template><p>{{name}} {{age}}</p><user-infov-model:name="name"v-model:age="age"></user-info> </template><script> import { reactive, toRefs } from 'vue' import UserInfo from './UserInfo.vue'export default {name: 'VModel',components: { UserInfo },setup() {const state = reactive({name: 'monday',age: '18'})return toRefs(state)} } </script>

此時瀏覽器的顯示效果如下：

此時，我們可以得出結論：子組件通過控制 :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 這個功能，不再可用。

<!-- 以下filter在vue3中不再可用！！ --> <!-- 在雙花括號中 --> {{ message | capitalize }}<!-- 在v-bind中使用 --> <div v-bind:id="rawId | formatId"></div>

8、Teleport

Teleport ，中文翻譯過來就是遠距離傳送。在 vue2 中，比如我們要定義點擊某個按鈕，去跳轉一個模態框，這個時候一般需要去操作 DOM 元素，或者再定義一個新的組件。但是在 vue3 ，我們可以用 teleport 來解決。我們可以使用 teleport 來直接定義在當前組件中，之后通過v-if等方式來控制其顯示與否。演示代碼如下：

<!-- data 中設置modalOpen: false --> <button @click="modalOpen = true">Open full scree modal!(With teleport!) </button><teleport to="body"><div v-if="modalOpen" class="modal"><div>telePort 彈窗(父元素是body)<button @click="modalOpen = false">Colse</button></div></div> </teleport>

9、Suspense

Suspense，是對vue2.x中的插槽做一個封裝，這里不進行一一講解。下面給出代碼演示：

<Suspense><template><Test1/> <!-- 是一個異步組件 --></template><!-- #fallback就是一個具名插槽。即Suspense組件內部，有兩個slot，其中一個具名為 fallback --><template #fallback>Loading...</template> </Suspense>

三、😜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：

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函數邏輯放在組件中使用：

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 ，這樣的學習路線更為合理。

四、🙃結束語

vue3 確實解決了 vue2 的很多問題，上文所描述的也只是冰山一角。但并沒有說 vue3 出了就是 vue3 最好， vue2 不用了。因為 vue3 確實解決了一些問題，但同時也帶來了一些問題，所以說，兩者更多的是一個相輔相成的結果。

關于vue3的超入門知識就講到這里啦！希望對大家有幫助~

• 關注公眾號 星期一研究室 ，第一時間關注學習干貨，更多有趣的專欄待你解鎖~
• 如果這篇文章對你有用，記得 一鍵三連 再走哦！
• 我們下期見！🥂🥂🥂

總結

以上是生活随笔為你收集整理的卷死了！再不学vue3就没有人要你了！速来围观vue3新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。