【6月日新计划更文活动】第20天

watch函数

与Vue2.x中的watch配置功能一致
两个注意点：
- 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监视(deep配置失效)
- 监视reactive定义的响应式数据中某个属性时：deep配置有效

setup() {
    // 数据
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      firstName: 'three',
      lastName: 'wang',
      job: {
        j1: {
          salary: 20
        }
      }
    })
    console.log('输出person', person)

    // 情景一：监视 ref 所定义的一个响应式数据
    // watch(sum, (newValue, oldValue) => {
    //   console.log('sum改变了', newValue, oldValue)
    // })

    // 情景二：监视 ref 所定义的多个响应式数据

    // watch([sum, msg], (newValue, oldValue) => {
    //   console.log('sum或者msg改变了', newValue, oldValue)
    // }, { immediate: true, deep: true })

    // 情景三：监视 reactive 所定义的一个响应式数据
    // 1、无法正确获取 oldValue
    // 2、强制开启了深度监视(deep 配置无效 (deep:false 不生效))
    // watch(person, (newValue, oldValue) => {
    //   console.log('person改变了', newValue, oldValue)
    // }, { deep: false })

    // 情景四：监视reactive 所定义的一个响应式数据中的某个属性
    // watch(() => person.firstName, (newValue, oldValue) => {
    //   console.log('person的firstName变化了', newValue, oldValue)
    // })

    // 情景五：监视reactive所定义的一个响应式数据中的某些属性
    watch([() => person.firstName, () => person.lastName], (newValue, oldValue) => {
      console.log('person的firstName或lastName变化了', newValue, oldValue)
    })

    // 特殊情况
    watch(() => person.job, (newValue, oldValue) => {
      console.log('person的Job变化了', newValue, oldValue);
    }, { deep: true })
    // 此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效

    // return 返回对象
    return {
      sum,
      msg,
      person
    }
  }

Vue3学习笔记(捌)

watch函数