watch 监听器

问题一
对于 Watch 和计算属性的区别还是弄不清楚,希望有人解答下 ???

watch中的几个常见属性:

1. handler： 定义监听到键名发生变化后执行的回调

2. immediate：因为默认是监听到数据改变时，才会执行handler回调；如果我们想一开始就让他的变化回调handler执行，就需要使用immediate: true

3. deep：可以深度监听整个键名内部的所有属性

常用示例:

export default {
    name: "TestComponent",
    props: {
    
        // 定义一个对象，用于接收传递的属性
        attrs: {
            type: Object,
            default () {
                return {};
            }
        },
        
    },
    watch: {
    
        attrs: {
            deep: true, // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
            immediate: true, // 是否立即执行一次handler
            handler(newValue, oldValue) {
                console.log('--  我监听到了数据的变化');
            }
        },
        
    }
        

computed
使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性; 即擅长处理的情景: 一个数据受多个数据影响;

1. 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的。
2. 只有当该计算属性被用于模版展示时,才会触发Get方法,否则无效;

image.jpeg

watch 监听属性
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。
使用场景: 一个数据影响多个数据

image.png

总结:
在对于单一数据时, computed 和 Watch 的处理效果是一样的.

computed:

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算；
2. 不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化； ---> 这句话怎么理解 ? ? ?
3. 如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个 set 方法，当数据变化时，调用 set 方法；
4. 只能通过 Data 中声明过或者父组件传递的 props 中的数据通过计算创建的值
5. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性 是一个多对一或者一对一，一般用computed；

Watch:

1. 不支持缓存，数据变化，直接会触发相应的操作
2. watch 支持异步操作
3. 当一个属性发生变化时，需要执行对应的操作，一对多
4. 监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据。当数据变化时触发其他操作