vue3 watch理解

监听变化

vue3版本watch(1,2,3) 接收三个参数

第1个参数 需要监听的数据

第2个参数是监听的回调参数

回调里常用的两个参数,(一,二)=>{
第一个参数是新值,第二个参数是旧值
其实还有第三个参数是个函数清除副作用
}

第3个参数是一些配置opt

immediate:是否在页面进入的时候开始监听,布尔值
deep:深度监听,布尔值
flush:有三个值,pre post sync 默认第一个渲染前,渲染后,立即同步

普通使用方法

// 引入
  import { ref, watch } from 'vue'
  let count = ref(1)
  watch(count, (newValue, oldValue) => {
    console.log(`新值：${newValue}`)
    console.log(`旧值：${oldValue}`)
  })

奇怪的使用方法

这个方法可以用来监听父传子

 watch(
    () => num,
    (newValue, oldValue) => {
      
    }
  )

其他配置使用

深度监听

 watch(
    address,
    (newValue, oldValue) => {
    },
    {
      deep: true
    }
  )

监听多个

watch(
    [a, b],
    ([newA, newB], [oldA, oldB]) => {
      回来的也是数组
    }
  )

立即执行

 watch(
    count,
    (newValue, oldValue) => {
    
    },
    {
      immediate: true
    }
  )

回调的时机

watch(
    name,
    (newValue, oldValue) => {
    
    },
    {
      flush: 'post'
    }
  )