Vue3 Composition API的使用簡介

Posted on by

vue3.0在7月發佈瞭rc版本，vue-cli4.5後也支持選擇vue3作為備選版本可以體驗瞭，vue3的正式版本相必也不遠瞭。學不動瞭呀!!!!
相比vue2.0版本(Option API)，Composition API（組合API）算是3.0的重大變更之一瞭。

概述

Composition API 主要靈感來源於React Hooks，目的是通過一組低侵入式的、函數式的 API，使得我們能夠更靈活地「組合」組件的邏輯。

示例

<template>
 <div>{{count}}</div>
 <button @click="addCount">添加</button>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
 name: 'App',
 setup () {
  const count = ref(0)
  const getCount = () => {
   count.value = Math.floor(Math.random() * 10)
  }
  const addCount = () => {
   count.value++
  }
  onMounted(() => {
   getCount()
  })

  return {
   count,
   addCount
  }
 }
});
</script>

Composition API顧名思義就是不再傳入data、mounted等參數，通過引入的ref、onMounted等方法實現數據的雙向綁定、生命周期函數的執行。

為什麼需要

1.在組件比較復雜的情況下，可以將邏輯代碼合到一起去，而不會被option強行分隔。這提高瞭代碼質量的上限，同時也拉低瞭代碼質量的下限。來自官方的一張對比圖：

2.更好的進行復用。

在vue2中，想要復用部分邏輯的代碼，都是通過mixin進去。但mixin進去的內容實際上很不直觀，而且相同命名會被覆蓋。而通過composition API，因為所有的方法都是引入的，可以將單獨某個邏輯進行封裝。例如對發送驗證碼倒計時功能進行封裝。

<template>
 <input type="number" placeholder="請輸入驗證碼">
 <button v-if="count">{{count}}秒後可重新發送</button>
 <button v-else @click="startCount">發送驗證碼</button>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

const userCountDown = () => {
 const count = ref(0)
 const countDown = (num: number) => {
  count.value = num
  num--
  if (num > 0) {
   setTimeout(() => {
    countDown(num)
   }, 1000)
  }
 }
 const startCount = () => {
  // get verifyCode
  countDown(60)
 }

 return { count, startCount }
}

export default defineComponent({
 name: 'Home',
 setup () {
  const { count, startCount } = userCountDown()
  return { count, startCount }
 }
});
</script>

3.更好的typescript支持。不會再往vue原型上添加很多內容，而是通過引入的方式，類型定義會更清晰。

setup

setup是vue新增的一個選項，它是組件內使用Composition API的入口。setup是在創建vue組件實例並完成props的初始化之後執行。因為setup會在option api解析之前被調用，所以setup中的this會與options中得完全不一樣。為瞭避免混亂，在setup中不使用this。同時setup返回的值，可以在模板和其他option中使用。從設計上來說，vue官方是將所有的事情在setup裡完成。setup返回值連接的是template模板與方法。

ref、reactive

既然不在傳入data，那麼將數據創建和監聽響應式就需要通過vue暴露出來的功能 ref或reactive。兩者有所區別，ref用於基礎賦值類型的數據，而reactive用於引用類型的數據。

其中基礎賦值類型的值，在setup方法中，需要用 .value的方式進行獲取和修改。因為賦值類型的值如果return出去返回值，就失去瞭數據的雙綁定。但是在template中，可以進行直接訪問。

<template>
 <div>{{count}}
  <button @click="changeCount">添加</button>
 </div>
 <div>學生的姓名是:{{student.name}}</div>
 <div>學生的年齡是:{{student.age}}
  <button @click="changeStudentAge(20)">添加</button>
 </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
 name: 'Home',
 setup () {
  const count = ref(0)
  const changeCount = () => {
   count.value = count.value + 1
  }
  const student = reactive({
   name: 'Bob',
   age: 12
  })
  const changeStudentAge = (age: number) => {
   student.age = age
  }
  return {
   count,
   changeCount,
   student,
   changeStudentAge
  }
 }
});
</script>

computed與watch

<template>
 <div>{{count}}</div>
 <div>{{doubleCount}}</div>
 <button @click="addCount">添加</button>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect, watch } from 'vue';

export default defineComponent({
 name: 'App',
 setup () {
  const count = ref(0)
  watch(count, () => { // 如多個則用數組的方式傳入[count, count1]
   console.log('watch', count.value)
  })
  watchEffect(() => {
   console.log('watchEffect', count.value)
  })
  const addCount = () => {
   count.value++
  }
  const doubleCount = computed(() => {
   return count.value * 2
  })
  return {
   count,
   doubleCount,
   addCount
  }
 }
});
</script>

watch與watchEffect的差別是，watchEffect會立馬執行，執行中被讀取的響應式 數據會被觀測。而watch隻有在watch對象有變化時才會執行。

生命周期

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

以上就是Vue3 Composition API的使用簡介的詳細內容，更多關於Vue3 Composition API的使用的資料請關註WalkonNet其它相關文章！

推薦閱讀：