526互联

[Vue]监视属性watch

发布时间 2023-10-24 12:00:54作者: 夕苜19
 
    1. 当被监视的属性变化时，回调函数自动调用，进行相关操作
    2. 监视的属性必须存在，才能进行监视！！（但不会报错）
    3. 监视的两种写法:
        (1). new Vue时传入watch配置
        (2). 通过vm.$watch监视
    4. 只有handler的时候，可以简写
 
new Vue传入watch配置：
<body>
    <div id="root">
        <h3>今天天气很{{ info }}</h3>
        <button @click="changeWeather">抬头再看看</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info: function () {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather: function () {
                this.isHot = !this.isHot
                this.x++
            }
        },
        // 配置方法1
        watch: {
            // 也可以监视计算属性 info
            info: {
                immediate: true,
                // handler: function (newValue, oldValue) {   // 也行
                handler(newValue, oldValue) {
                    console.log('温度发生了变化info -->', newValue, oldValue)
                }
            },
            // 只有handler的时候，可以简写
            isHot(newValue, oldValue) {
                console.log('温度发生了变化is -->', newValue, oldValue)
            }
        }
    })
</script>

通过vm.$watch监视：

<body>
    <div id="root">
        <h3>今天天气很{{ info }}</h3>
        <button @click="changeWeather">抬头再看看</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info: function () {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather: function () {
                this.isHot = !this.isHot
                this.x++
            }
        }
    })

    // 配置方法2:  vm.$watch('属性名', {监视配置})
     vm.$watch("isHot", {
        immediate: true,
        handler(newValue, oldValue) {
           console.log('温度发生了变化0.0 -->', newValue, oldValue)
       }
    })
    // 只有handler的时候，可以简写
    vm.$watch("isHot", function (newValue, oldValue) {
        console.log('温度发生了变化0.0 -->', newValue, oldValue)
    })  
</script>

 

 watch对象中的某个属性 
// 监视多级属性中某个属性的变化
'numbers.a': {
    immediate: true,
    handler(newValue, oldValue) {
        console.log('a变化了 -->', newValue, oldValue)
    }
},

 

    深度监视:
        (1). Vue中的watch默认不监测对象内部值的改变(一层)。
        (2). 配置deep:true可以监测对象内部值改变(多层)。
    备注:
        (1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
        (2). 使用watch时根据数据的具体结构，决定是否采用深度监视。
<body>
    <div id="root">
        <p>a的值是： {{ numbers.a }}</p>
        <button @click="numbers.a++">点我a+1</button>
        <p>b的值是： {{ numbers.b }}</p>
        <button @click="numbers.b++">点我b+1</button>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            numbers: {
                a: 1,
                b: 1
            }
        },
        watch: {
            // 监视多级属性中所有属性的变化 deep: true
            numbers: {
                deep: true,
                immediate: true,
                handler(newValue, oldValue) {
                    console.log('numbers变化了', newValue, oldValue)
                }
            }
        }
    })
</script>