watch-post-effect.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1; padding-bottom: 20px">
  <!-- #endif -->
    <view class="page">
      <text id="count" ref="countRef" class="uni-common-mb">count: {{ count }}</text>
      <text id="watch-count-res" class="uni-common-mb">watch count result: {{ watchCountRes }}</text>
      <text id="watch-count-track-num" class="uni-common-mb">watch count track number: {{ watchCountTrackNum }}</text>
      <text id="watch-count-trigger-num" class="uni-common-mb">watch count trigger number:
        {{ watchCountTriggerNum }}</text>
      <text id="watch-count-cleanup-res" class="uni-common-mb">watch count cleanup result:
        {{ watchCountCleanupRes }}</text>
      <button id="increment-btn" class="uni-common-mb" @click="increment">
        increment
      </button>
      <button id="stop-watch-count-btn" class="uni-common-mb" @click="triggerStopWatchCount">
        stop watch count
      </button>
      <text id="obj-str" ref="objStrRef" class="uni-common-mb">obj.str: {{ obj.str }}</text>
      <text id="obj-num" class="uni-common-mb">obj.num: {{ obj.num }}</text>
      <text id="obj-bool" ref="objBoolRef" class="uni-common-mb">obj.bool: {{ obj.bool }}</text>
      <text id="obj-arr" ref="objArrRef" class="uni-common-mb">obj.arr: {{ obj.arr }}</text>
      <text id="watch-obj-res" class="uni-common-mb">watch obj result: {{ watchObjRes }}</text>
      <text id="watch-obj-str-res" class="uni-common-mb">watch obj.str result: {{ watchObjStrRes }}</text>
      <text id="watch-obj-arr-res" class="uni-common-mb">watch obj.arr result: {{ watchObjArrRes }}</text>
      <button id="update-obj-btn" class="uni-common-mb" @click="updateObj">
        update obj
      </button>
      <text id="watch-count-obj-num-res" class="uni-common-mb">watch count and obj.num result:
        {{ watchCountAndObjNumRes }}</text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script setup>
  type Obj = {
    num : number,
    str : string,
    bool : boolean,
    arr : number[]
  }

  const countRef = ref(null)
  const count = ref<number>(0)
  const watchCountRes = ref('')
  const watchCountCleanupRes = ref('')
  const watchCountTrackNum = ref(0)
  const watchCountTriggerNum = ref(0)

  const stopWatchCount = watchPostEffect((onCleanup : OnCleanup) => {
    if (countRef.value !== null) {
      watchCountRes.value = `count: ${count.value}, count ref text: ${(countRef.value as Element).getAttribute('value')}`
    } else {
      watchCountRes.value = `count: ${count.value}, count ref text: `
    }
    const cancel = () => {
      watchCountCleanupRes.value = `watch count cleanup: ${count.value}`
    }
    onCleanup(cancel)
  },
    {
      // 响应属性或引用作为依赖项被跟踪时调用
      onTrack(event : DebuggerEvent) {
        if (event.type === 'get') {
          watchCountTrackNum.value++
        }
      },
      // 侦听器回调被依赖项的变更触发时调用
      onTrigger(event : DebuggerEvent) {
        if (event.type === 'set') {
          watchCountTriggerNum.value++
        }
      }
    },
  )

  const triggerStopWatchCount = () => stopWatchCount()

  const increment = () => {
    count.value++
  }

  const obj = reactive({
    num: 0,
    str: 'num: 0',
    bool: false,
    arr: [0]
  } as Obj)

  const watchObjRes = ref('')
  watchPostEffect(() => {
    watchObjRes.value = `obj: ${JSON.stringify(obj)}`
  })

  const objStrRef = ref(null)
  const watchObjStrRes = ref('')
  watchPostEffect(() => {
    if (objStrRef.value !== null) {
      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: ${(objStrRef.value as Element).getAttribute('value')}`
    } else {
      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text: `
    }
  })

  const watchObjArrRes = ref('')
  watchPostEffect(() => {
    watchObjArrRes.value = `arr: ${JSON.stringify(obj.arr)}`
  })

  const watchCountAndObjNumRes = ref('')
  watchPostEffect(() => {
    watchCountAndObjNumRes.value = `count: ${count.value}, obj.num: ${obj.num}`
  })

  const updateObj = () => {
    obj.num++
    obj.str = `num: ${obj.num}`
    obj.bool = !obj.bool
    obj.arr.push(obj.num)
  }
</script>