初见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方法。