vue3中 watchEffect，watchPostEffect，watchSyncEffect的区别，代码示例

其实关于watchEffect，watchPostEffect，watchSyncEffect的区别就是执行的时机不同，watchSyncEffect 是最先执行的，其次是watchEffect，最后才是watchPostEffect，先来看一下vue官网的说明（不想看说明的直接看示例代码就可以了）

watch 的执行时机说明：

watchPostEffect 和 watchSyncEffect 的执行时机说明：

下面是我的示例代码：

<script setup lang="ts">
import {
  ref,
  watchEffect,
  watchPostEffect,
  watchSyncEffect,
  onMounted,
  onBeforeMount,
} from 'vue'

const num = ref(1)
const numInstance = ref(null)

// 输出1 所有组件更新前
watchSyncEffect(() => {
  console.log(num.value * 2, 'watchSyncEffect')
})
// 输出2 父组件更新后，当前组件更新前
watchEffect(() => {
  console.log(num.value * 2, 'watchEffect')
})
// 输出4 当前组件更新后
watchPostEffect(() => {
  console.log(num.value * 2, 'watchPostEffect')
})
// 输出3
onBeforeMount(() => {
  console.log('onMounted')
})
// 输出5
onMounted(() => {
  console.log('onMounted')
})

const addNum = () => {
  num.value++
}
</script>
<template>
  <div>
    <h1 ref="numInstance">{{  num  }}</h1>
    <el-button type="primary"
               @click="addNum">增加</el-button>
  </div>
</template>


<style lang="less" scoped>
</style>

这是控制台的输出：