Vue中使用watch监听属性以及深度监听

监听属性watch：

1.当被监听的属性发生变化时，回调函数自动调用，进行相关操作

2.监听的属性必须存在，才能进行监视

简单的监听示例：

<template>
    <div>
        <button @click="number++">点击+1</button>
        <h1>数量：{{number}}</h1>
    </div>
</template>

<script>
    export default {
        name: "demo3",
        data(){
            return {
                number:0
            }
        },
        watch:{
            // 简单的监听
            number(newValue,oldValue){
                console.log('number发生改变了')
                console.log(`新值为${newValue}`)
                console.log(`旧值为${oldValue}`)
            }
        }
    }
</script>

<style scoped>

</style>

效果图：

 immediate（初始化调用一下监听）

<template>
    <div>
        <button @click="number++">点击+1</button>
        <h1>数量：{{number}}</h1>
    </div>
</template>

<script>
    export default {
        name: "demo3",
        data(){
            return {
                number:0
            }
        },
        watch:{
            // 简单的监听
            // number(newValue,oldValue){
            //     console.log('number发生改变了')
            //     console.log(`新值为${newValue}`)
            //     console.log(`旧值为${oldValue}`)
            // }

            //immediate:初始化的时候让handler调用一下
            number:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log('number发生改变了')
                    console.log(`新值为${newValue}`)
                    console.log(`旧值为${oldValue}`)
                }
            }
        }
    }
</script>

<style scoped>

</style>

效果图：

 

深度监听

深度监听：

1. Vue中的watch，默认不监听对象内部值的改变。

2.配置deep:true可以监听对象内部值的改变。

举个例子，当我们把number改成一个对象时。这时候使用watch属性无法监听到number对象下面的属性。

<template>
    <div>
        <button @click="number.a++">点击+1</button>
        <h1>数量：{{number.a}}</h1>
    </div>
</template>

<script>
    export default {
        name: "demo3",
        data(){
            return {
                number:{
                    a:0
                }
            }
        },
        watch:{
            // 简单的监听
            // number(newValue,oldValue){
            //     console.log('number发生改变了')
            //     console.log(`新值为${newValue}`)
            //     console.log(`旧值为${oldValue}`)
            // }

            //immediate:初始化的时候让handler调用一下
            number:{
                // immediate:true,
                handler(newValue,oldValue){
                    console.log('number发生改变了')
                    console.log(`新值为${newValue}`)
                    console.log(`旧值为${oldValue}`)
                }
            }
        }
    }
</script>

<style scoped>

</style>

如果监听number对象下的属性比较少。那么可以这么写：

'number.a':{
                immediate:true,
                handler(newValue,oldValue){
                    console.log('number发生改变了')
                    console.log(`新值为${newValue}`)
                    console.log(`旧值为${oldValue}`)
                }
            }

但是这种写法有个弊端，只能监听number下面的一个属性。如果需求是要监听number下面的所有属性。那么这时候就需要用到deep

deep:true开启深度监听

watch:{

            //监听所有属性
            number:{
                immediate:true,//初始化的时候让handler调用一下
                deep:true,//开启深度监听
                handler(newValue,oldValue){
                    console.log('number发生改变了')
                    console.log(`新值为`,newValue)
                    console.log(`旧值为`,oldValue)
                }
            }
        }

效果图：