vue3学习记录笔记之侦听器

vue2针对watch监听的写法分别有

data() {
      return {
        keyValue: '111111',
        objValue: {
          name: ''
        }
      }
  },
watch: {
    keyValue(newData,oldData) {
      console.log(newData)
      console.log(oldData)
    },
    keyValue: {
      handler(newData, oldData) {
          console.log(newData)
          console.log(oldData)
      },
      deep: true,
      immediate: true
    },
    objValue: {
      handler(newData, oldData) {
        console.log(newData)
        console.log(oldData)
      },
      deep: true,
      immediate: true
    },
    'objValue.name'(newData, oldData) {
      console.log(newData)
      console.log(oldData)
    },
    'objValue.name': {
      handler(newData, oldData) {
        console.log(newData)
        console.log(newData)
      },
      deep: true,
      immediate: true
    }
}

我们再来看看vue3都做了哪些上的改变

import { watch, ref, reactive } from 'vue'
const x = ref(1)
const y = ref(2)
const z = reactive({ count: 0 })

//监听单个值
 watch(x, (newX) => {
   console.log(newX)
 })
 
 //使用getter进行监听
watch(() => x.value + y.value, (sum) => {
  console.log(sum)
})
// 同时监听多个值的变化
watch([x, y], ([newX, newY]) => {
  console.log(newX, newY)
})
//注意watch不能监听使用响应式的数据里面的值
watch(z.count, (count) => {
  console.log(count)
})
//如果想要监听响应式里面的属性就需要通过getter的形式进行传递过
watch(() => z.count, (count) => {
  console.log(count)
})
// 如果想要监听整个对象或者数组
watch(z, (newZ) => {
  console.log(newZ)
})
// 如果要进行深层次监听需要传递过去deep
watch(() => z.count, (count) => {
  console.log(count)
}, { deep: true })

总结：
1，watch一共可以传递三个参数
watch('需要监听的值', '监听值的返回的箭头函数', '是否是深度监听，或者是不是立即执行')
2，watchEffet进来页面的时候就会执行，watch的监听中有一个immediate就可以省去这样的写法，同时在监听体内有哪些参数改变都会触发watchEffect改变，同时watchEffect也会跟踪，这样让代码写起来更加的简单

watch和watchEffect都有回调的触发时机
默认情况下，用户创建的侦听器回调，都会在vue组件更新之前被调用，这意味着你在侦听器回调中访问的DOM将是被vue更新之前的状态

如果要axing在DOM更新之后执行watch和watchEffect需要加flush参数为‘post’，或者调用vue内置hook函数 watchPistEffect

watch(source, callback,{
    flush: 'post'
})
watchEffect(callback,{
    flush: 'post'
})
//或者使用watchPostEffect()
import { watchPostEffect } from 'vue'
watchPostEffect(() => {
    //在Vue更新后执行
})