监听watch中，ref()和reactive()响应式数据的区别

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两种不同方式，它们在监听和响应属性更改的方式上有一些区别。

1.ref 的监听是浅层的：

2.使用 ref 创建的变量是一个简单的响应式引用，它包裹着基本类型的值或对象的引用。
3.当你通过 ref 创建的变量被用于模板或组件的渲染时，对该变量进行更改会触发视图的重新渲染，因为 Vue 会跟踪对 ref 引用的更改。
4.然而，当 ref 引用的是一个对象时，更改对象内部属性的值不会自动触发视图的重新渲染。你需要手动使用 .value 访问或修改对象属性的值。

5.如果想要监听对象属性，可以使用deep属性，也可以直接监听单个数据：

 ()=>state.value.age
 ()=>{
      console.log("age变化了")
        }

2.reactive 可以深层监听对象属性：

6.使用 reactive 可以对整个对象进行响应式包装，包括对象内部属性。
7.reactive 会递归地将对象的所有属性转换为响应式属性，使得当任何属性值发生变化时，都能触发相关的依赖更新。
8.对于嵌套对象或数组，它们的内部属性的修改也会被监听到，并触发相应的更新。

总结来说，ref 是一种简单的响应式引用，用于包装基本类型的值或对象的引用。它的监听是浅层的，意味着当对 ref 引用的对象的属性进行修改时，变化不会自动触发更新。相比之下，reactive 可以对整个对象进行深层监听，包括对象内部属性的修改。它适用于需要监听对象属性的场景