Vue - watch() 监视属性的使用

在 Vue 3 中，watch() 是一个用于观察响应式数据的 API，可以用来在数据变化时执行某些操作。它是在 Vue 的组合式 API 中使用的主要功能之一，允许在代码中细致地控制数据变化的反应。

作用：监视数据的变化

特点：Vue 3中的 watch 只能监视以下四种数据：

• ref 定义的数据
• reactive 定义的数据
• 函数返回 一个值 （getter函数）
• 一个包含上述内容的数组

基本语法：

watch(source, callback, options)

• 参数说明：
  • source：可以是一个响应式数据（如 ref 或 reactive）的路径，也可以是一个函数，返回想要观察的响应式数据。
  • callback：当 source 变化时调用的函数。该函数接收三个参数：
    • newValue：新的值。
    • oldValue：旧的值。
    • onCleanup（可选）：一个函数，可以在函数调用时进行清理操作。
  • options：（可选）一个对象，允许你传入一些控制选项，例如深度观察（deep）以及立即执行（immediate）等。

一、ref 定义的数据 （基本 + 对象）

情况一：ref 定义的基本数据类型

情况二：ref定义的对象类型

注意：

• 若修改的是 ref 定义的对象中的属性，newValue 和 oldValue 都是新值，因为他们都是同一个对象；
• 若修改整个 ref 定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了。

二、reactive 定义的数据（对象）

三、监视 ref 或 reactive 定义的对象类型数据中的某个属性

注意：

• 若该属性值不是【对象类型】，需要写成函数形式；
• 若该属性值依然是【对象类型】，可直接编写，也可以写成函数，建议写成函数。

 结论：监视的若是对象里的属性，那么最好都写成函数形式，需要注意的是，若是对象，监视的是地址值，需要关注对象内部，需要手动添加深度监视。

四、监视上述的多个数据（一个包含上述内容的数组）

// 监视 name 和 one 
watch([() => person.name, () => person.car.one], (newValue, oldValue) => {
    
    console.log('监视内容变化了', newValue, oldValue);
    
}, { deep: true });

以上：都来自于“尚硅谷禹神”，自己学习后的总结笔记。