一文带你掌握vue3中侦听器的使用

import { ref, watch } from 'vue'
const count = ref(0)
const price = ref(10)
// 侦听响应式数据
watch(count, (newVal, oldVal) => {
    // 每当count更新时，都会执行这里的函数
    console.log("new count:", newVal) // 1  更新后的值
    console.log("old count:", oldVal) // 0  更新前的值
})
// 侦听getter函数
watch(
    () => count.value * price.value,
    (newVal, oldVal) => {
        // 每当count或者price更新时，都会执行这里的函数
        console.log("新总价:", newVal) // 10  更新后的值
        console.log("旧总价:", oldVal) // 0  更新前的值
    })
// 使用数组侦听多个数据源
watch(
    [count, () => price.value],
    (newValArr, oldValArr) => {
        // 每当count或者price更新时，都会执行这里的函数
        // 需要注意此时的回调数据为数组
        // newValArr[0] count
        // newValArr[1] () => price.value]
        // oldValArr 同上
        console.log(newValArr) // [1, 10]  更新后的值
        console.log(oldValArr) // [0, 10]  更新前的值
    })
count.value++ // 更新count值

const count = ref(0)
watch(count, (newVal,oldVal) => {
    console.log(newVal)  // 0
    console.log(oldVal)  // undefind
}, {
    immediate: true  // 创建时立即执行一次回调
})

const obj1 = reactive({ val: 1 })
watch(obj1, (newVal, oldVal) => {
    // 在obj的嵌套属性变更时触发
    // 注意此处的newVal oldVal的值是相等的
    // 因为他们是同一个对象
})
const obj2 = ref({ val: 2 })
// 传入ref侦听的对象时，添加.value才会默认创建深层侦听
watch(obj2.value, (newVal, oldVal) => {})
obj1.val++
obj2.value.val++

// 当直接传入ref创建的对象或是返回响应式对象的getter函数时
// 只有在它们的对象被整个替换时才会触发回调
//  例：obj2.value = { val: 3 }
// 传入deep选项即可创建深层侦听
// getter函数
watch(() => obj2.value, (newVal, oldVal) => {
    // 注意此处的newVal oldVal的值是相等的
    // 除非替换掉整个obj2.value
}, {
    deep: true   // 当值变更时触发回调
})
// ref创建的对象数据
watch(obj2, (newVal, oldVal) => {
    // 注意此处的newVal oldVal的值是相等的
    // 除非替换掉整个obj2.value
}, {
    deep: true   // 当值变更时触发回调
})

import { ref, watchEffect } from 'vue';
const count = ref(0)
watchEffect(() => {
    console.log(count.value) // 0
})

const unwatch = watchEffect(() => { })
// 当不需要时调用 unwatch() 即可销毁侦听
unwatch()

setTimeout(() => {
  // 在同步中创建的侦听器在组件销毁时，自动停止，而异步中创建的不会！
  watchEffect(() => {})
}, 100)

watch(count, ()=>{
}, {
  flush: 'post'
})
watchEffect(()=>{
}, {
  flush: 'post'
})