Vue3 中的 watch 和 watchEffect 详解

在 vue 3 组件化开发中 中使用 watch , watchEffect 都需要import导入

import { watch, watchEffect } from 'vue'

watch

属性

  • watch 具备一定的惰性
  • 可以拿到原始值和当前值
  • 可以侦听多个数据的变换,用一个侦听器承载

传参

  • 第一个参数,需要传递一个需要监听的 function 、ref 、reactive object
  • 第二个参数,用来接受数据原始值和当前值
  • 第三个参数,传递 watch 的高级配置项 例如 immediate: true

一、监听基础类型

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log('watch' + newValue, oldValue)
})

二、监听复杂类型

在实际开发中,我们经常需要监听一个复杂的类型,具体写法如下

const boy = reactive({
  name: '小小孩子们',
  blog: 'www.xxhzm.cn',
  friend: {
    friend1 : '小明',
    friend2 : '小红'
  }
})
  1. 监听整个对象

    watch(boy, (newValue, oldValue) => {
     console.log('boy发生了变化')
     console.log(newValue);
     console.log(newValue.friend);
    })
    
    boy.name = 'Little children'
    boy.friend.friend3 = '小王'

    第一个参数传入我们要监听的对象,当监听的对象里面的任意一个属性发生变化,watch 方法便会触发。

  2. 监听对象中的某个属性

    // 如果我们直接写 boy.name
    
    watch(boy.name, (newValue, oldValue) => {
     console.log('boy发生了变化')
     console.log(newValue)
    })
    
    // vue会提示我们,监听的对象需要是一个 function 或者 ref 或者是一个 reactive object
    
    // 正确的写法是:
    watch(() => boy.name, (newValue, oldValue) => {
     console.log('boy发生了变化')
     console.log(newValue)
    })
    
    boy.name = 'Little children'
  3. 监听对象的所有属性

    watch(() => boy, (newValue, oldValue) => {
     console.log('boy发生了变化')
     console.log(newValue)
    }, {
     immediate: true
    })
    
    boy.name = 'Little children'
  4. 监听多个数据

    watch 里面可以接收一个数组

    无论数组里面的哪一个数据发生变化,都会执行侦听器

    watch([()=> boy.name, count], ([newName, newCount], [oldName, oldCount]) => {
     console.log(newName + '---' + oldName)
     console.log(newCount + '---' + oldCount)
    })
    
    boy.name = 'Little children'

watchEffect

属性

  • 立即执行的,没有惰性
  • 不需要传递要侦听的内容,会自动感知代码依赖,不需要传递很多参数,只需要一个回调函数
  • 不能获取之前数据的值

一、监听基础类型

const count = ref(0)

watchEffect(() => {
  console.log(count.value)
})

count.value ++
最后修改:2022 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏