学习Vue3 第九章（watchEffect侦听器）

<script setup>
import { computed, ref, watchEffect } from 'vue'
const firstName = ref('张')
const lastName = ref('三')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    ;[firstName.value, lastName.value] = newValue.split('-')
  },
})

const stop = watchEffect(
  onCleanup => {
    console.log(firstName.value)
    const ip = document.getElementById('ip')
    console.log(ip, 'ip')

    onCleanup(() => {
      // 清理副作用 1.防抖 2.取消接口调用
      console.log('onCleanup')
    })
  },
  {
    flush: 'post',  // 获取组件更新后的dom
  },
)

stop() // 取消监听
</script>