初見Vue3 Composition API的疑問

Vue3 退出了Composition API的新特性，相信大家都已經學習過了，官方文檔上的教程寫的也很詳細。

https://v3.cn.vuejs.org/guide/composition-api-introduction.html

但是有些官方文檔中沒有提到，但在使用過程中會遇到的問題，讓我來探究一下。

兩種生命週期鉤子

在Composition API中可以聲明生命週期鉤子函數，對於以前的選項式生命週期鉤子，除了beforeCreate和created沒有外，其它都有相對應的。

https://v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html

那麼兩種生命週期可以共存嗎？如果可以的話，執行順序是怎麼樣的呢？

示例：

import { onBeforeMount, onMounted } from 'vue'

export default {
  setup() {
    console.log('setup')
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  }
}

輸出的結果爲：

setup
beforeCreate
created
onBeforeMount
beforeMount
onMounted
mounted

所以，在setup中onBeforeMount和beforeMounted分別先於beforeMount和mounted觸發。對於onBeforeUpdate，onUpdated，onBeforeUnmount，onUnmounted，情況是一樣的。

ref和DOM

ref可以創建一個響應式的變量，比如：

<template>
    <div @click="count++">{{count}}</div>
</template>

<script>
import { ref } from 'vue'

export default {
    setup(){
        const count = ref(0)
    
        return {
            count
        }
    }
}
</script>

ref也可以用來建立對DOM元素的引用，比如：

<template>
    <div ref="content"></div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
    setup(){
        const content = ref(null)
        
        onMounted(()=>{
            console.log(content.value) // <div></div>
        })
    
        return {
            content
        }
    }
}
</script>

當setup函數返回的變量中有和模板中ref值相同的變量時，相對應的DOM引用會賦值到變量上。

初看這一點會讓人有點迷惑，因爲一般的用法是使用$refs來獲取DOM元素，但是ref還有另一種函數聲明方法：

<template>
    <div ref="el => content = el"></div>
</template>

在Composition API中直接傳遞字符串應該是這種方式的語法糖。

異步setup

setup方法可以是異步的嗎？即：

async setup(){}

從實驗結果來看，在一般的組件中，setup方法不能是異步的。如果是異步函數，組件的初始化過程會中斷。

但是在與suspense配合的異步組件中可以使用異步的setup方法。