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 ++