vue3中watch和watchEffect监听

在Vue 3中，computed和watch都是用于响应式地处理数据变化的工具，但它们有一些重要的异同点。

异同点如下：

计算属性 (Computed):

计算属性是基于它们的依赖进行缓存的。只有在依赖发生变化时，计算属性才会重新计算，可以避免不必要的重复计算。
计算属性适用于派生出一些新的数据，比如对数据进行过滤、排序、格式化等操作。
计算属性可以像普通属性一样使用，而不需要在模板中调用方法。
计算属性中的函数必须有return返回值

监听属性 (Watch):

监听属性允许我们在数据变化时执行异步操作或复杂的逻辑。
监听属性适用于对数据变化做出响应，比如在数据变化时发送请求、处理副作用等。
监听属性可以监听一个或多个数据的变化，并在数据变化时执行相应的操作。
监听属性中的函数不是必须要用return返回值。
相似之处:

计算属性和监听属性都可以依赖于响应式数据。
它们都可以用于监测数据的变化，并作出相应的处理。
        
原文链接：https://blog.csdn.net/qq_18798149/article/details/135302780

Watch()

        当值被改变是提供两个值第一次是因为没有旧值，所以只会有一个新值，当第二次改变时才会有旧值

        当监听的是对象时无论怎么改变都没反应，这是因为 Watch 是浅层监听需要监听对象可以开启深层监听有两种方式。

        但只需要改变某一个值时推荐使用第一种，当不确定改变多少个值时推荐使用第二种

第一种：普通方法

第二种：开启深层监听

 

 当需要改变多个值时使用：

或者：