Watch那些事

watch()

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。【人话:敌不动我不动，敌动我动】

一般情况基本数据使用ref，引用数据使用reactive，当然这也不绝对

三个入参

第一个参数：被侦听的目标

• ref
• reactive
• getter函数
• …

第二个参数：回调函数 (newVal,oldVal ,onCleanup)=>{}

• newVal 新值，oldVal 旧值
• onCleanup 清理副作用 【人话：清除函数体里面什么定时器，绑定的事件…】

第三个参数：配置项

• immediate?: boolean // 默认：false， 是否进入组件就加载一下

• deep?: boolean // 默认：false，深度监听，

• flush：调整回调函数的刷新时机。post | sync |pre 默认

  • post 侦听器回调会在父组件以及所属组件的 DOM 更新之后调用
  • sync 侦听器回调会在Vue 进行任何更新之前触发
  • pre 侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用

• onTrack / onTrigger：调试侦听器的依赖。参考调试侦听器。

• once：回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。

侦听ref对象

let state = ref("hello world")
//注意下面两种写法的区别
watch(state,(newVal)=>{})
watch(()=>state.value,(newVal)=>{})

侦听reactive响应式数据

let state = reactive({name:"jucky"})

watch(state,(newVal)=>{}) //自动开启深度监听
watch(()=>state.name,(newVal)=>{})
watch(()=>state,(newVal)=>{},{deep:true}) //需要deep配合

项目中遇到的

let a = ref(1)
let b = ref(2)
a = b
watch(a,(newVal)=>{})  //有效

let c = ref(3)
let d = ref(4)
watch(c,(newVal)=>{})  //无效，
c = d