当前位置：首页 > news >正文

vue3 watch的各种使用情景

news 来源：原创 2024/5/19 22:06:44

watch监听ref单个简单数据

const switchStatus = ref(props.checked)
watch(
      switchStatus,
      (newVal,oldVal) => {
      	console.log(newVal,oldVal)
      },
      {
        immediate: true
      }
    )

watch监听ref多个简单数据

    watch(
      [switchStatus, switchClassName],
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )

// newVal和oldVal也是数组
在这里插入图片描述
相信大家通过上面的代码也发现了，watch的第三个参数为可配置项，用来配置我们熟悉的immediate和deep

watch监听reactive数据的全部属性

const person = reactive({
      name: 'dx',
      age: 18
    })
watch(
      person,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )
const changePerson = () => {
      person.age = 19
    }
changePerson()

在这里插入图片描述
问题一：除了第一次能查到oldVal和newVal，后面基本拿不到oldVal

const person = reactive({
      name: 'dx',
      age: 18,
      job: {
        place: '成都'
      }
    })
watch(
      person,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )
const changePerson = () => {
      person.job.place = '重庆'
    }
changePerson()

在这里插入图片描述
问题二与vue2不同，我没加deep为true,但watch也能监听到，并且和加了deep为true没区别，有点像强制监听。

watch监听reactive定义的响应式数据中某个属性

    const person = reactive({
      name: 'dx',
      age: 18,
      job: {
        place: '成都'
      }
    })
     watch(
      () => person.job.place,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )
    const changePerson = () => {
      person.job.place = '重庆'
    }
    changePerson()

在这里插入图片描述
如果要监听某一个具体的属性，请在watch的第一个参数写成一个函数，并返回要监听的属性

watch监听reactive定义的响应式数据中某些属性

    const person = reactive({
      name: 'dx',
      age: 18,
      job: {
        place: '成都'
      }
    })
    watch(
      [() => person.job.place, () => person.age],
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )
    const changePerson = () => {
      person.job.place = '重庆'
      person.age = 19
    }

    changePerson()

在这里插入图片描述
watch监听一个reactive的多个属性，将watch的第一个参数变为数组，每一个数组元素都是函数，并且返回要监听的属性

特殊情况

1.watch监听reactive中某个属性，依然是复杂数据类型

    const person = reactive({
      name: 'dx',
      age: 18,
      job: {
        a: {
          place: '成都'
        }
      }
    })

    watch(
      () => person.job,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true
      }
    )

    const changePerson = () => {
      person.job.a.place = '重庆'
    }

    changePerson()

在这里插入图片描述
发现除了immediate第一次触发了watch外，改变person.job.a.place = '重庆’并未触发watch
这种情况，需要加deep:true，用函数返回的复杂数据，没有强制开启deep。

    const person = reactive({
      name: 'dx',
      age: 18,
      job: {
        a: {
          place: '成都'
        }
      }
    })

    watch(
      () => person.job,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true,
        deep: true
      }
    )

    const changePerson = () => {
      person.job.a.place = '重庆'
    }

    changePerson()

在这里插入图片描述
加了deep后，watch被触发了，但拿不到oldVal的值。

watch监听ref定义的复杂数据

    const person = ref({
      name: 'dx',
      age: 18,
      job: {
        a: {
          place: '成都'
        }
      }
    })

    watch(
      person.value,
      (newVal, oldVal) => {
        console.log(newVal, oldVal)
      },
      {
        immediate: true,
        deep: true
      }
    )

    const changePerson = () => {
      person.value.job.a.place = '重庆'
    }

    changePerson()