计算属性和监听属性大汇总 ！！！

计算属性：

1. 定义：计算属性是Vue.js中的一个特殊属性，它基于其他数据动态计算出一个新的值。这些值可以被用作模板中的变量，类似于普通的数据属性。计算属性定义在Vue组件的computed选项中，是一个返回计算结果的函数。

2. 特点：

• 缓存性：计算属性会缓存依赖的数据，只有当依赖的数据发生变化时才会重新计算。如果多次访问该计算属性，Vue会直接返回缓存的结果，提高了性能。
• 响应式：当计算属性依赖的数据发生变化时，计算属性会自动重新计算，并更新绑定到该计算属性的视图。
• 可读性：计算属性允许我们编写更清晰、可读性更高的代码，将复杂的逻辑封装在一个函数中，提高了可维护性。
• 默认只读：计算属性默认是只读的，建议不要修改计算属性。但如果你需要修改计算属性，可以通过同时提供getter和setter来创建。
• 

监听属性：

1. 定义：监听属性是Vue.js中用于观察和响应Vue实例上数据变化的一个对象。当监听的属性发生变化时，都会执行特定的操作。监听属性定义在watch选项中。
2. 特点：

• 实时性：监听属性可以实时地监听数据的变化，并在数据变化时执行相应的操作。
• 深度监听：如果要监听的属性值是一个对象，为了监听对象内部的变化，可以在选项参数中设置deep选项的值为true。
• 
• 

watch 和 watchEffect：

watch

watch是一个选项式API，通常在组件的options中定义，用于监听组件内的响应式数据的变化。当被监听的数据发生变化时，会触发相应的回调函数。

特性：

1. 手动指定监听的数据：你需要明确指定要监听哪个数据的变化。
2. 可以获取变化前后的值：在回调函数中，你可以获取到数据变化前后的值（newVal和oldVal）。
3. 深度监听：通过deep选项，你可以设置是否深度监听对象内部的变化。
4. 立即执行：通过immediate选项，你可以设置在组件创建时立即执行一次回调函数。

使用场景：

• 当你需要明确知道哪个数据发生了变化，并基于这个变化执行某些操作时。
• 当你需要比较数据变化前后的值时。

watchEffect

watchEffect是一个组合式API，通常在setup函数或生命周期钩子中使用，用于自动追踪响应式数据的变化并在其变化时执行回调函数。

特性：

1. 自动追踪依赖：你不需要手动指定要监听哪个数据的变化，watchEffect会自动追踪函数内部使用的响应式数据。
2. 无法获取变化前的值：与watch不同，watchEffect的回调函数只能获取到变化后的值。
3. 立即执行：默认情况下，watchEffect在组件创建时会立即执行一次回调函数来收集依赖。

使用场景：

• 当你需要执行一些副作用操作（如DOM更新、异步请求等），并且这些操作依赖于多个响应式数据时。
• 当你不需要明确知道哪个数据发生了变化，只需要在数据变化时执行某些操作时。

总结

watch和watchEffect的主要区别在于它们的使用方式和特性。watch需要手动指定监听的数据，并可以获取变化前后的值，适用于明确知道需要监听哪个数据并基于其变化执行操作的场景。而watchEffect则自动追踪函数内部使用的响应式数据，并在数据变化时执行回调函数，适用于执行副作用操作并依赖多个响应式数据的场景。

计算属性和监听属性的区别：

• 触发方式：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。而监听属性则是通过监听数据的变化来触发相应的操作。
• 适用场景：计算属性适用于需要基于其他数据动态计算新值的情况，如处理复杂的逻辑或计算等。而监听属性则更适用于需要在数据变化时执行特定操作的情况，如数据校验、异步请求等。