vue3中computed、watch和各生命周期的执行顺序

vue3的组合式API中computed、watch和各生命周期哪个先执行哪个后执行你了解吗？ 看以下代码，你觉得输出结果是什么呢？

<template>count:{{ count }}</template>
<script setup>
import {
  computed,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
} from "vue"
const count2 = ref(2)
const count = computed(() => {
  console.log("computed")
  return count2.value
})
watch(count, (newVal, oldVal) => {
  console.log("watch", newVal, oldVal)
})
onBeforeMount(() => {
  count2.value = 5
  console.log("onBeforeMount")
})
onMounted(() => {
  count2.value = 4
  console.log("onMounted")
})
onBeforeUpdate(() => {
  console.log("onBeforeUpdate")
})
onUpdated(() => {
  console.log("onUpdated")
})
onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
})
onUnmounted(() => {
  console.log("onUnmounted")
})
</script>

来看一下控制台输出结果： 由此得出结论：

1. 在页面首次加载时，computed会先执行一次，并且在onBeforeMount、onMounted声明周期之前
2. 当computed和watch依赖的数据发生变化时，会触发computed和watch
3. 之后再进入剩余的生命周期中

如果有误，请各位大佬指点~