vue3监视对象，以及对watch的3个参数解析

一嘴一个橘子2023-11-03 16:31

javascript 复制代码

import { reactive, watch } from 'vue'

let myInfo = reactive({
  name: 'white',
  age: 18,
  sex: '男'
})

watch(
  () => ({ ...myInfo }),
  (newVal, oldVal) => {
    console.log('新=', newVal)
    console.log('旧=', oldVal)
  },
  { deep: true }
)

由于 Vue 的 watch 函数在监听对象时，会对对象的引用进行比较，

如果引用相同，即使对象的属性值发生了变化，也不会触发回调函数，

因此，为了绕过这个限制，我们需要返回一个新的对象来实现监听对象属性的变化。

这段代码使用了 Vue 的 watch 函数来监听数据源 myInfo 的变化。watch 函数会观察 myInfo 的值，并在其发生改变时执行相应的回调函数。

在第一个参数中，

复制代码

传入了一个箭头函数，它返回了 myInfo 对象的所有属性，

这样做是为了创建一个新的对象，以便在 watch 函数中观察其变化，

这样做是为了确保 watch 函数能够检测到 myInfo 对象的属性的变化，而不仅仅是 myInfo 对象本身的变化

在第二个参数中，

复制代码

定义了一个回调函数，它会在 myInfo 的值发生变化时被触发，

这个回调函数接收两个参数：newVal 和 oldVal，

newVal：新的数据源的值，即箭头函数返回的对象，

oldVal：旧的数据源的值，即在回调函数被触发前的 myInfo 的值

第三个参数是一个选项对象，

复制代码

{ deep: true }：表示要深度观察对象的变化，

如果 myInfo 对象的属性是对象或数组，它们的内部变化也会被观察到，

如果不提供这个配置项，watch 函数默认只观察对象的引用变化，而不会深入观察对象内部的变化