vue中如何使用watch

Watch（侦听器）

watch用来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

1.使用方法

函数用法

watch: {
    count(newValue, oldValue) {
        console.log('count-newValue:' + newValue)
        console.log('count-oldValue:' + oldValue)
        // todo  需要依据count执行的异步操作或复杂操作
    },
}

对象用法

watch: {
    amount: {
        handler(newValue, oldValue) {
            console.log('amount-newValue:' + newValue?.value, newValue)
            console.log('amount-oldValue:' + oldValue?.value, oldValue)
            // todo  需要依据count执行的异步操作或复杂操作
        },
        immediate: true, // 默认是false，watch在首次绑定amount时，是否立即执行handler函数
        deep: true // 默认是false，在监听对象变化时，一般情况下无法监听对象内部属性的变化。deep属性为true时，可以对对象深度监听
    }
    
    // 也可以直接监听
    'amount.value': {
        handler(newValue, oldValue) {
            console.log('amount-newValue:' + newValue?.value, newValue)
            console.log('amount-oldValue:' + oldValue?.value, oldValue)
            // todo  需要依据count执行的异步操作或复杂操作
        },
        immediate: true,
        deep: false
    }
}

字符串或者数组用法

watch: {
    // ['valueChange', 'valueChange2']
    value: 'valueChange'
},
methods: {
    valueChange(newValue, oldValue) {
        console.log('value-newValue:' + newValue)
        console.log('value-oldValue:' + oldValue)
    },
    valueChange2() {
        console.log('valueChange2-------')
    }
}

2.使用场景

什么样的数据可以被watch监听。

data

vue中data属性中的数据可以被监听

data() {
    return {
        count: 0
    }
},
watch: {
    count(newValue, oldValue) {
        console.log('count-newValue:' + newValue)
        console.log('count-oldValue:' + oldValue)
        // todo  需要依据count执行的异步操作或复杂操作
    },
}

props

vue中props属性中的数据可以被监听，可以监听父组件传过来的值的变化，处理本组件的逻辑。

watch: {
    // props属性
    count(newValue, oldValue) {
        console.log('子组件newVlaue:' + newValue)
        console.log('子组件oldValue:' + oldValue)
    },
},
props: {
    count: {
        type: Number,
        default: 0
    }
},

inject

依赖注入到该组件的数据可以被监听。

watch: {
    // 依赖
    map: {
        handler(newValue, oldValue) {
            console.log('依赖newVlaue:' + newValue)
            console.log('依赖oldValue:' + oldValue)
        },
        immediate: true
    }
},
inject: ['map']

computed

计算属性值的变化可以被监听到。

watch: {
    // computed属性
    countMultiply(newValue, oldValue) {
        console.log('计算属性newVlaue:' + newValue)
        console.log('计算属性oldValue:' + oldValue)
    }
},
computed: {
    countMultiply() {
        return this.count + 100
    }
},

3.视频讲解

视频讲解