Vue3监听器3

watchEffect

在讲watchEffect之前我们先看看如下例子。在创建监听器的时候立即执行一次回调函数请求数据，当goodsId改变时再执行一遍回调请求数据:

const goodsId = ref(1)
const goodsDetail = ref(null)

// 使用定时器模拟异步获取数据
const getData = (id) => { 
    return new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve(`goodsDetail${id}`)
        }, 2000)
    })
}

watch(goodsId, async () => { 
    goodsDetail.value = await getData(goodsId.value)
    console.log(goodsDetail.value)
}, {immediate: true})

watchEfect会自动帮我们定位要监听的数据，并且会立即执行回调函数，不需要使用{immediate: true}，以上例子可以使用watchEffect做如下简化:

watchEffect(async () => { 
    goodsDetail.value = await getData(goodsId.value)
    console.log(goodsDetail.value)
})

watchEffect的优势

如果要监听多个数据，不会有手动维护监听项的负担，如果要监听多个嵌套对象中的多个属性的时候也不会同深层监听那样遍历对象，而是只找要监听的几个属性，非常节省性能。

停止侦听器

在setup()或是在<script setup>中同步创建的监听器会在当前组件销毁时停止监听，但是异步创建的监听器不会随着组件的销毁停止监听，必须手动停止以防止内存泄漏:

// 同步创建的，自动停止
watch(goodsId, async () => { 
    // 一些操作....
}, {immediate: true})

// 异步创建的，不会自动停止
setTimeout(() => {
  watch(() => {})
}, 1000)

要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：

const unwatch = watchEffect(() => {})
// 当该侦听器不再需要时会停止监听
unwatch()