Vue3.0新特性以及使用的示例分析

這篇文章給大家分享的是有關Vue3.0新特性以及使用的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

為什么要升級 Vue3

使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有數據都是定義在data中，方法定義在methods中的，并且使用this來調用對應的數據和方法。那 Vue3.x 中就可以不這么玩了， 具體怎么玩我們后續再說， 先說一下 Vue2.x 版本這么寫有什么缺陷，所有才會進行升級變更的。

回顧 Vue2.x 實現加減 

<template>    <div class="homePage">      <p>count: {{ count }}</p>         <p>倍數： {{ multiple }}</p>           <div>        <button style="margin-right: 10px" @click="increase">加1</button>        <button @click="decrease">減一</button>          </div>          </div>  </template>  <script>  export default {    data() {      return { count: 0 };    },    computed: {      multiple() {        return 2 * this.count;      },    },    methods: {      increase() {        this.count++;     },      decrease() {        this.count--;      },    },  };  </script>

上面代碼只是實現了對count的加減以及顯示倍數， 就需要分別在 data、methods、computed 中進行操作，當我們增加一個需求，就會出現下圖的情況：

當我們業務復雜了就會大量出現上面的情況， 隨著復雜度上升，就會出現這樣一張圖， 每個顏色的方塊表示一個功能：

甚至一個功能還有會依賴其他功能，全攪合在一起。

當這個組件的代碼超過幾百行時，這時增加或者修改某個需求， 就要在 data、methods、computed 以及 mounted 中反復的跳轉，這其中的的痛苦寫過的都知道。

那我們就想啊， 如果可以按照邏輯進行分割，將上面這張圖變成下邊這張圖，是不是就清晰很多了呢, 這樣的代碼可讀性和可維護性都更高：

那么 vue2.x 版本給出的解決方案就是 Mixin, 但是使用 Mixin 也會遇到讓人苦惱的問題：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2.  命名沖突問題

3.  不清楚暴露出來的變量的作用

4.  邏輯重用到其他 component 經常遇到問題

關于上面經常出現的問題我就不一一舉例了，使用過的小伙伴多多少少都會遇到。文章的重點不是 Mixin, 如果確實想知道的就留言啦~

所以，我們 Vue3.x 就推出了Composition API主要就是為了解決上面的問題，將零散分布的邏輯組合在一起來維護，并且還可以將單獨的功能邏輯拆分成單獨的文件。接下來我們就重點認識Composition API。

Composition API

setup

setup 是 Vue3.x 新增的一個選項， 他是組件內使用 Composition API的入口。

setup 執行時機

我在學習過程中看到很多文章都說 setup 是在 beforeCreate和created之間， 這個結論是錯誤的。實踐是檢驗真理的唯一標準， 于是自己去檢驗了一下：

export default defineComponent({    beforeCreate() {      console.log("----beforeCreate----");    },    created() {      console.log("----created----");    },    setup() {      console.log("----setup----");    },  });

setup 執行時機是在 beforeCreate 之前執行，詳細的可以看后面生命周期講解。

setup 參數

使用setup時，它接受兩個參數：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2.  props: 組件傳入的屬性

3.  context

setup 中接受的props是響應式的， 當傳入新的 props 時，會及時被更新。由于是響應式的， 所以不可以使用 ES6 解構，解構會消除它的響應式。錯誤代碼示例， 這段代碼會讓 props 不再支持響應式：

// demo.vue  export default defineComponent ({      setup(props, context) {          const { name } = props          console.log(name)      },  })

那在開發中我們想要使用解構，還能保持props的響應式，有沒有辦法解決呢？大家可以思考一下，在后面toRefs學習的地方為大家解答。接下來我們來說一下setup接受的第二個參數context，我們前面說了setup中不能訪問 Vue2 中最常用的this對象，所以context中就提供了this中最常用的三個屬性：attrs、slot 和emit，分別對應 Vue2.x 中的 $attr屬性、slot插槽 和$emit發射事件。并且這幾個屬性都是自動同步最新的值，所以我們每次使用拿到的都是最新值。

reactive、ref 與 toRefs

在 vue2.x 中， 定義數據都是在data中， 但是 Vue3.x 可以使用reactive和ref來進行數據定義。那么ref和reactive他們有什么區別呢？分別什么時候使用呢？說到這里，我又不得不提一下，看到很多網上不少文章說 (reactive用于處理對象的雙向綁定，ref則處理 js 基礎類型的雙向綁定)。我其實不太贊同這樣的說法，這樣很容易初學者認為ref就能處理 js 基本類型， 比如ref也是可以定義對象的雙向綁定的啊， 上段代碼：

setup() {     const obj = ref({count:1, name:"張三"})     setTimeout(() =>{         objobj.value.count = obj.value.count + 1         obj.value.name = "李四"     }, 1000)     return{         obj     }   }

我們將obj.count和obj.name綁定到頁面上也是可以的；但是reactive函數確實可以代理一個對象， 但是不能代理基本類型，例如字符串、數字、boolean 等。接下來使用代碼展示一下ref、reactive的使用：

運行效果:

上面的代碼中，我們綁定到頁面是通過user.name,user.age；這樣寫感覺很繁瑣，我們能不能直接將user中的屬性解構出來使用呢? 答案是不能直接對user進行結構， 這樣會消除它的響應式， 這里就和上面我們說props不能使用 ES6 直接解構就呼應上了。那我們就想使用解構后的數據怎么辦，解決辦法就是使用toRefs。toRefs 用于將一個 reactive 對象轉化為屬性全部為 ref 對象的普通對象。具體使用方式如下：

<template>    <div class="homePage">      <p>第 {{ year }} 年</p>      <p>姓名：{{ nickname }}</p>      <p>年齡：{{ age }}</p>    </div>  </template>  <script>  import { defineComponent, reactive, ref, toRefs } from "vue";  export default defineComponent({    setup() {      const year = ref(0);      const user = reactive({ nickname: "xiaofan", age: 26, gender: "女" });      setInterval(() => {        year.value++;        user.age++;      }, 1000);      return {        year,        // 使用reRefs        ...toRefs(user),      };    },  });  </script>

生命周期鉤子

我們可以直接看生命周期圖來認識都有哪些生命周期鉤子 (圖片是根據官網翻譯后繪制的)：

從圖中我們可以看到 Vue3.0 新增了setup，這個在前面我們也詳細說了， 然后是將 Vue2.x 中的beforeDestroy名稱變更成beforeUnmount; destroyed 表更為 unmounted，作者說這么變更純粹是為了更加語義化，因為一個組件是一個mount和unmount的過程。其他 Vue2 中的生命周期仍然保留。上邊生命周期圖中并沒包含全部的生命周期鉤子， 還有其他的幾個， 全部生命周期鉤子如圖所示：

我們可以看到beforeCreate和created被setup替換了（但是 Vue3 中你仍然可以使用， 因為 Vue3 是向下兼容的， 也就是你實際使用的是 vue2 的）。其次，鉤子命名都增加了on; Vue3.x 還新增用于調試的鉤子函數onRenderTriggered和onRenderTricked 下面我們簡單使用幾個鉤子， 方便大家學習如何使用，Vue3.x 中的鉤子是需要從 vue 中導入的：

import { defineComponent, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,  onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked,  onRenderTriggered } from "vue"; export default defineComponent({ //  beforeCreate和created是vue2的 beforeCreate() {  console.log("------beforeCreate-----"); }, created() {  console.log("------created-----"); }, setup() { console.log("------setup-----");  // vue3.x生命周期寫在setup中 onBeforeMount(() => {  console.log("------onBeforeMount-----"); }); onMounted(() => {  console.log("------onMounted-----"); }); // 調試哪些數據發生了變化  onRenderTriggered((event) =>{ console.log("------onRenderTriggered-----",event);  }) }, });

關于生命周期相關的內容就介紹到這里，下面我們介紹一下 Vue3.x 中watch有什么不同。

watch 與 watchEffect 的用法

watch 函數用來偵聽特定的數據源，并在回調函數中執行副作用。默認情況是惰性的，也就是說僅在偵聽的源數據變更時才執行回調。

watch(source, callback, [options])

參數說明：

•  source: 可以支持 string,Object,Function,Array; 用于指定要偵聽的響應式變量

•  callback: 執行的回調函數

•  options：支持 deep、immediate 和 flush 選項。

接下來我會分別介紹這個三個參數都是如何使用的， 如果你對 watch 的使用不明白的請往下看：

偵聽 reactive 定義的數據

import { defineComponent, ref, reactive, toRefs, watch } from "vue";  export default defineComponent({    setup() {      const state = reactive({ nickname: "xiaofan", age: 20 });      setTimeout(() => {        state.age++;     }, 1000);      // 修改age值時會觸發 watch的回調      watch(        () => state.age,        (curAge, preAge) => {          console.log("新值:", curAge, "老值:", preAge);        }      );      return {       ...toRefs(state),      };    },  });

偵聽 ref 定義的數據

const year = ref(0);  setTimeout(() => {    year.value++;  }, 1000);  watch(year, (newVal, oldVal) => {    console.log("新值:", newVal, "老值:", oldVal);  });

偵聽多個數據

上面兩個例子中，我們分別使用了兩個 watch, 當我們需要偵聽多個數據源時， 可以進行合并， 同時偵聽多個數據：

watch([() => state.age, year], ([curAge, newVal], [preAge, oldVal]) => { console.log("新值:", curAge, "老值:", preAge); console.log("新值:", newVal, "老值:", oldVal); });

偵聽復雜的嵌套對象

我們實際開發中，復雜數據隨處可見， 比如：

const state = reactive({    room: {      id: 100,      attrs: {        size: "140平方米",        type: "三室兩廳",      },    },  });  watch(   () => state.room,    (newType, oldType) => {      console.log("新值:", newType, "老值:", oldType);    },    { deep: true }  );

如果不使用第三個參數deep:true， 是無法監聽到數據變化的。前面我們提到，默認情況下，watch 是惰性的, 那什么情況下不是惰性的， 可以立即執行回調函數呢？其實使用也很簡單， 給第三個參數中設置immediate: true即可。關于flush配置，還在學習，后期會補充

stop 停止監聽

我們在組件中創建的watch監聽，會在組件被銷毀時自動停止。如果在組件銷毀之前我們想要停止掉某個監聽， 可以調用watch()函數的返回值，操作如下：

const stopWatchRoom = watch(() => state.room, (newType, oldType) => {      console.log("新值:", newType, "老值:", oldType);  }, {deep:true}); setTimeout(()=>{      // 停止監聽      stopWatchRoom()  }, 3000)

還有一個監聽函數watchEffect, 在我看來watch已經能滿足監聽的需求，為什么還要有watchEffect呢？雖然我沒有 get 到它的必要性，但是還是要介紹一下watchEffect，首先看看它的使用和watch究竟有何不同。

import { defineComponent, ref, reactive, toRefs, watchEffect } from "vue";  export default defineComponent({    setup() {      const state = reactive({ nickname: "xiaofan", age: 20 });      let year = ref(0)      setInterval(() =>{          state.age++          year.value++      },1000)      watchEffect(() => {          console.log(state);          console.log(year);        }      );      return {          ...toRefs(state)      }    },  });

執行結果首先打印一次state和year值；然后每隔一秒，打印state和year值。從上面的代碼可以看出， 并沒有像watch一樣需要先傳入依賴，watchEffect會自動收集依賴, 只要指定一個回調函數。在組件初始化時， 會先執行一次來收集依賴， 然后當收集到的依賴中數據發生變化時， 就會再次執行回調函數。所以總結對比如下：

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2.  watchEffect 不需要手動傳入依賴

3.  watchEffect 會先執行一次用來自動收集依賴

4.  watchEffect 無法獲取到變化前的值， 只能獲取變化后的值

上面介紹了 Vue3 Composition API的部分內容, 還有很多非常好用的 API, 建議直接查看官網 composition-api。其實我們也能進行自定義封裝。

自定義 Hooks

開篇的時候我們使用 Vue2.x 寫了一個實現加減的例子， 這里可以將其封裝成一個 hook, 我們約定這些「自定義 Hook」以 use 作為前綴，和普通的函數加以區分。useCount.ts 實現：

import { ref, Ref, computed } from "vue";  type CountResultProps = {    count: Ref<number>;    multiple: Ref<number>;    increase: (delta?: number) => void;    decrease: (delta?: number) => void;  }; export default function useCount(initValue = 1): CountResultProps {    const count = ref(initValue);    const increase = (delta?: number): void => {      if (typeof delta !== "undefined") {        count.value += delta;      } else {        count.value += 1;      }    };    const multiple = computed(() => count.value * 2);    const decrease = (delta?: number): void => {      if (typeof delta !== "undefined") {        count.value -= delta;      } else {        count.value -= 1;      }    };    return {      count,      multiple,      increase,      decrease,    };  }

接下來看一下在組件中使用useCount這個 hook:

<template>    <p>count: {{ count }}</p>    <p>倍數： {{ multiple }}</p>    <div>      <button @click="increase()">加1</button>      <button @click="decrease()">減一</button>    </div>  </template>  <script lang="ts">  import useCount from "../hooks/useCount";   setup() {      const { count, multiple, increase, decrease } = useCount(10);          return {              count,              multiple,              increase,              decrease,          };      },  </script>

開篇 Vue2.x 實現，分散在data,method,computed等， 如果剛接手項目，實在無法快速將data字段和method關聯起來，而 Vue3 的方式可以很明確的看出，將 count 相關的邏輯聚合在一起， 看起來舒服多了， 而且useCount還可以擴展更多的功能。項目開發完之后，后續還會寫一篇總結項目中使用到的「自定義 Hooks 的文章」，幫助大家更高效的開發， 關于Composition API和自定義 Hooks 就介紹到這里， 接下來簡單介紹一下 vue2.x 與 vue3 響應式對比。

簡單對比 vue2.x 與 vue3.x 響應式

其實在 Vue3.x 還沒有發布 bate 的時候， 很火的一個話題就是Vue3.x 將使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。沒有無緣無故的愛，也沒有無緣無故的恨。為何要將Object.defineProperty換掉呢，咋們可以簡單聊一下。我剛上手 Vue2.x 的時候就經常遇到一個問題，數據更新了啊，為何頁面不更新呢？什么時候用$set更新，什么時候用$forceUpdate強制更新，你是否也一度陷入困境。后來的學習過程中開始接觸源碼，才知道一切的根源都是 Object.defineProperty。對這塊想要深入了解的小伙伴可以看這篇文章 為什么 Vue3.0 不再使用 defineProperty 實現數據監聽？要詳細解釋又是一篇文章，這里就簡單對比一下Object.defineProperty 與 Proxy

  1.  Object.defineProperty只能劫持對象的屬性， 而 Proxy 是直接代理對象

由于Object.defineProperty只能劫持對象屬性，需要遍歷對象的每一個屬性，如果屬性值也是對象，就需要遞歸進行深度遍歷。但是 Proxy 直接代理對象， 不需要遍歷操作

  2.  Object.defineProperty對新增屬性需要手動進行Observe

因為Object.defineProperty劫持的是對象的屬性，所以新增屬性時，需要重新遍歷對象， 對其新增屬性再次使用Object.defineProperty進行劫持。也就是 Vue2.x 中給數組和對象新增屬性時，需要使用$set才能保證新增的屬性也是響應式的, $set內部也是通過調用Object.defineProperty去處理的。

Teleport

Teleport 是 Vue3.x 新推出的功能， 沒聽過這個詞的小伙伴可能會感到陌生；翻譯過來是傳送的意思，可能還是覺得不知所以，沒事下邊我就給大家形象的描述一下。

Teleport 是什么呢？

Teleport 就像是哆啦 A 夢中的「任意門」，任意門的作用就是可以將人瞬間傳送到另一個地方。有了這個認識，我們再來看一下為什么需要用到 Teleport 的特性呢，看一個小例子：在子組件Header中使用到Dialog組件，我們實際開發中經常會在類似的情形下使用到 Dialog ，此時Dialog就被渲染到一層層子組件內部，處理嵌套組件的定位、z-index和樣式都變得困難。Dialog從用戶感知的層面，應該是一個獨立的組件，從 dom 結構應該完全剝離 Vue 頂層組件掛載的 DOM；同時還可以使用到 Vue 組件內的狀態（data或者props）的值。簡單來說就是,即希望繼續在組件內部使用Dialog, 又希望渲染的 DOM 結構不嵌套在組件的 DOM 中。此時就需要 Teleport 上場，我們可以用<Teleport>包裹Dialog, 此時就建立了一個傳送門，可以將Dialog渲染的內容傳送到任何指定的地方。接下來就舉個小例子，看看 Teleport 的使用方式

Teleport 的使用

我們希望 Dialog 渲染的 dom 和頂層組件是兄弟節點關系, 在index.html文件中定義一個供掛載的元素:

<body>    <div id="app"></div>    <div id="dialog"></div>  </body>

定義一個Dialog組件Dialog.vue, 留意 to 屬性， 與上面的id選擇器一致：

<template>    <teleport to="#dialog">      <div class="dialog">        <div class="dialog_wrapper">          <div class="dialog_header" v-if="title">            <slot name="header">              <span>{{ title }}</span>            </slot>          </div>        </div>        <div class="dialog_content">          <slot></slot>        </div>        <div class="dialog_footer">          <slot name="footer"></slot>        </div>      </div>    </teleport>  </template>

最后在一個子組件Header.vue中使用Dialog組件, 這里主要演示 Teleport 的使用，不相關的代碼就省略了。header組件

<div class="header">      ...      <navbar />      <Dialog v-if="dialogVisible"></Dialog>  </div>  ...

Dom 渲染效果如下：

圖片.png 可以看到，我們使用 teleport 組件，通過 to 屬性，指定該組件渲染的位置與 <div id="app"></div> 同級，也就是在 body 下，但是 Dialog 的狀態 dialogVisible 又是完全由內部 Vue 組件控制.

Suspense

Suspense是 Vue3.x 中新增的特性， 那它有什么用呢？別急，我們通過 Vue2.x 中的一些場景來認識它的作用。Vue2.x 中應該經常遇到這樣的場景：

<template>  <div>      <div v-if="!loading">          ...      </div>      <div v-if="loading">          加載中...      </div>  </div>  </template>

在前后端交互獲取數據時， 是一個異步過程，一般我們都會提供一個加載中的動畫，當數據返回時配合v-if來控制數據顯示。如果你使用過vue-async-manager這個插件來完成上面的需求， 你對Suspense可能不會陌生，Vue3.x 感覺就是參考了vue-async-manager. Vue3.x 新出的內置組件Suspense, 它提供兩個template slot, 剛開始會渲染一個 fallback 狀態下的內容， 直到到達某個條件后才會渲染 default 狀態的正式內容， 通過使用Suspense組件進行展示異步渲染就更加的簡單。:::warning 如果使用 Suspense, 要返回一個 promise :::Suspense 組件的使用：

<Suspense>        <template #default>            <async-component></async-component>        </template>        <template #fallback>            <div>                Loading...            </div>        </template>  </Suspense>

asyncComponent.vue:

<<template>  <div>      <h5>這個是一個異步加載數據</h5>      <p>用戶名：{{user.nickname}}</p>      <p>年齡：{{user.age}}</p>  </div>  </template>  <script>  import { defineComponent } from "vue"  import axios from "axios"  export default defineComponent({      setup(){          const rawData = await axios.get("http://xxx.xinp.cn/user")          return {              user: rawData.data          }      }  })  </script>

從上面代碼來看，Suspense 只是一個帶插槽的組件，只是它的插槽指定了default 和 fallback 兩種狀態。

片段（Fragment）

在 Vue2.x 中， template中只允許有一個根節點：

<template>      <div>          <span></span>          <span></span>      </div>  </template>

但是在 Vue3.x 中，你可以直接寫多個根節點， 是不是很爽：

<template>      <span></span>      <span></span>  </template>

更好的 Tree-Shaking

Vue3.x 在考慮到 tree-shaking的基礎上重構了全局和內部 API, 表現結果就是現在的全局 API 需要通過 ES Module的引用方式進行具名引用， 比如在 Vue2.x 中，我們要使用 nextTick:

// vue2.x  import Vue from "vue"  Vue.nextTick(()=>{      ...  })

Vue.nextTick() 是一個從 Vue 對象直接暴露出來的全局 API，其實 $nextTick() 只是 Vue.nextTick() 的一個簡易包裝，只是為了方便而把后者的回調函數的 this 綁定到了當前的實例。雖然我們借助webpack的tree-shaking, 但是不管我們實際上是否使用Vue.nextTick(), 最終都會進入我們的生產代碼， 因為 Vue 實例是作為單個對象導出的， 打包器無法堅持出代碼總使用了對象的哪些屬性。在 Vue3.x 中改寫成這樣：

import { nextTick } from "vue"  nextTick(() =>{      ... })

受影響的 API

這是一個比較大的變化， 因為以前的全局 API 現在只能通過具名導入，這一更改會對以下 API 有影響：

•  Vue.nextTick

•  Vue.observable（用 Vue.reactive 替換）

•  Vue.version

•  Vue.compile（僅限完整版本時可用）

•  Vue.set（僅在 2.x 兼容版本中可用）

•  Vue.delete（與上同）

內置工具

出來上面的 API 外， 還有許多內置的組件 以上僅適用于 ES Modules builds，用于支持 tree-shaking 的綁定器&mdash;&mdash;UMD 構建仍然包括所有特性，并暴露 Vue 全局變量上的所有內容 (編譯器將生成適當的輸出，以使用全局外的 api 而不是導入)。::: 前面都是 Vue3.0 的一些新特性，后面著重介紹一下相對于 Vue2.x 來說， 有什么變更呢？

變更

slot 具名插槽語法

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

<!--  子組件中：-->  <slot name="title"></slot>

在父組件中使用：

<template slot="title">      <h2>歌曲：成都</h2>  <template>

如果我們要在 slot 上面綁定數據，可以使用作用域插槽，實現如下：

// 子組件  <slot name="content" :data="data"></slot>  export default {      data(){          return{              data:["走過來人來人往","不喜歡也得欣賞","陪伴是最長情的告白"]          }      }  }

<!-- 父組件中使用 -->  <template slot="content" slot-scope="scoped">      <div v-for="item in scoped.data">{{item}}</div>  <template>

在 Vue2.x 中具名插槽和作用域插槽分別使用slot和slot-scope來實現， 在 Vue3.0 中將slot和slot-scope進行了合并同意使用。Vue3.0 中v-slot：

<!-- 父組件中使用 -->   <template v-slot:content="scoped">     <div v-for="item in scoped.data">{{item}}</div>  </template>  <!-- 也可以簡寫成： -->  <template #content="{data}">      <div v-for="item in data">{{item}}</div>  </template>

自定義指令

首先回顧一下 Vue 2 中實現一個自定義指令：

// 注冊一個全局自定義指令 `v-focus`  Vue.directive('focus', {    // 當被綁定的元素插入到 DOM 中時……    inserted: function (el) {      // 聚焦元素      el.focus()    } })

在 Vue 2 中， 自定義指令通過以下幾個可選鉤子創建：

•  bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

•  inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

•  update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

•  componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

•  unbind：只調用一次，指令與元素解綁時調用。

在 Vue 3 中對自定義指令的 API 進行了更加語義化的修改， 就如組件生命周期變更一樣， 都是為了更好的語義化， 變更如下：

所以在 Vue3 中， 可以這樣來自定義指令：

const { createApp } from "vue"  const app = createApp({})  app.directive('focus', {      mounted(el) {          el.focus()      }  })

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

<input v-focus />

v-model 升級

在使用 Vue 3 之前就了解到 v-model 發生了很大的變化， 使用過了之后才真正的 get 到這些變化， 我們先縱觀一下發生了哪些變化， 然后再針對的說一下如何使用：

•  變更：在自定義組件上使用v-model時， 屬性以及事件的默認名稱變了

•  變更：v-bind的.sync修飾符在 Vue 3 中又被去掉了, 合并到了v-model里

•  新增：同一組件可以同時設置多個 v-model

•  新增：開發者可以自定義 v-model修飾符

有點懵？別著急，往下看 在 Vue2 中， 在組件上使用 v-model其實就相當于傳遞了value屬性， 并觸發了input事件：

<!-- Vue 2 -->  <search-input v-model="searchValue"><search-input>  <!-- 相當于 -->  <search-input :value="searchValue" @input="searchValue=$event"><search-input>

這時v-model只能綁定在組件的value屬性上，那我們就不開心了， 我們就像給自己的組件用一個別的屬性，并且我們不想通過觸發input來更新值，在.async出來之前，Vue 2 中這樣實現：

// 子組件：searchInput.vue  export default {      model:{          prop: 'search',          event:'change'      }  }

修改后， searchInput 組件使用v-model就相當于這樣：

<search-input v-model="searchValue"><search-input>  <!-- 相當于 -->  <search-input :search="searchValue" @change="searchValue=$event"><search-input>

但是在實際開發中，有些場景我們可能需要對一個 prop 進行 “雙向綁定”， 這里以最常見的 modal 為例子：modal 挺合適屬性雙向綁定的，外部可以控制組件的visible顯示或者隱藏，組件內部關閉可以控制 visible屬性隱藏，同時 visible 屬性同步傳輸到外部。組件內部， 當我們關閉modal時, 在子組件中以 update:PropName 模式觸發事件：

this.$emit('update:visible', false)

然后在父組件中可以監聽這個事件進行數據更新：

<modal :visible="isVisible" @update:visible="isVisible = $event"></modal>

此時我們也可以使用v-bind.async來簡化實現：

<modal :visible.async="isVisible"></modal>

上面回顧了 Vue2 中v-model實現以及組件屬性的雙向綁定，那么在 Vue 3 中應該怎樣實現的呢？ 在 Vue3 中, 在自定義組件上使用v-model, 相當于傳遞一個modelValue 屬性， 同時觸發一個update:modelValue事件：

<modal v-model="isVisible"></modal>  <!-- 相當于 -->  <modal :modelValue="isVisible" @update:modelValue="isVisible = $event"></modal>

如果要綁定屬性名， 只需要給v-model傳遞一個參數就行, 同時可以綁定多個v-model：

<modal v-model:visible="isVisible" v-model:content="content"></modal>  <!-- 相當于 -->  <modal      :visible="isVisible"      :content="content"      @update:visible="isVisible"      @update:content="content"  />

不知道你有沒有發現，這個寫法完全沒有.async什么事兒了， 所以啊，Vue 3 中又拋棄了.async寫法， 統一使用v-model

異步組件

Vue3 中 使用 defineAsyncComponent 定義異步組件，配置選項 component 替換為 loader ,Loader 函數本身不再接收 resolve 和 reject 參數，且必須返回一個 Promise，用法如下：

<template>    <!-- 異步組件的使用 -->    <AsyncPage />  </tempate>  <script>  import { defineAsyncComponent } from "vue";  export default {    components: {      // 無配置項異步組件      AsyncPage: defineAsyncComponent(() => import("./NextPage.vue")),      // 有配置項異步組件      AsyncPageWithOptions: defineAsyncComponent({     loader: () => import(".NextPage.vue"),     delay: 200,     timeout: 3000,     errorComponent: () => import("./ErrorComponent.vue"),     loadingComponent: () => import("./LoadingComponent.vue"),   })    },  }  </script>

感謝各位的閱讀！關于“Vue3.0新特性以及使用的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！