Vue2：监视属性功能实现

生产队队长

已于 2024-01-07 16:48:38 修改

阅读量519

点赞数 8

分类专栏：前端文章标签： vue.js 前端 javascript

于 2023-12-14 17:12:55 首次发布

本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/135000012

版权

前端专栏收录该内容

96 篇文章 1 订阅

订阅专栏

一、普通监视

基础案例代码片段，这里，主要是监视isHot变量的变化。

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
/*            watch:{     //可以监测data、computed里的属性
                isHot:{
                    immediate:true,     //初始化时，立即调用一次handler
                    //当isHot发生改变时，被调用。
                    handler(newVal,oldVal){
                        console.log('isHot被修改了！',newVal,oldVal);
                    }
                }
            }*/
        });

        //监视方式2，这种方式，可以根据用户的行为，来修改监视对象
        vm.$watch('isHot',{
            immediate:true,     //初始化时，立即调用一次handler
            //当isHot发生改变时，被调用。
            handler(newVal,oldVal){
                console.log('isHot被修改了！',newVal,oldVal);
            }
        });

二、深度监视

    深度监视：
        1、Vue中的watch默认不监视对象内部的改变（一层）
        2、配置deep:true可以监测对象内部的改变（多层）
    备注：
        1、Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。
        2、使用watch时根据数据的具体结构，决定是否采用深度监测。

属性的层级是多层：
这里监视numbers

            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },

增加配置deep:true

            watch:{     //可以监测data、computed里的属性
                //监视多级属性中的任一属性的变化
                'numbers':{
                    deep:true,
                    handler(newVal, oldVal) {
                        console.log('numbers被修改了！',newVal, oldVal);
                    }
                }
            }

三、简写方式

要求监视的配置项中只有handler函数时，才可以简写。
Vue对象内部的简写方式

		isHot(newVal,oldVal){
		    console.log('isHot被修改了！',newVal,oldVal);
		}

Vue对象外部的简写方式

        vm.$watch('isHot',function (newVal,oldVal) {
            console.log('isHot被修改了！',newVal,oldVal);
        })

四、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气案例_深度监视_简写</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
        </div>
</body>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            watch:{     //可以监测data、computed里的属性
                //完整写法
/*                isHot:{
                    // immediate:true,     //初始化时，立即调用一次handler
                    // deep:true,   //深度监视
                    //当isHot发生改变时，被调用。
                    handler(newVal,oldVal){
                        console.log('isHot被修改了！',newVal,oldVal);
                    }
                },*/
                //简写    要求监视的配置项中只有handler函数时，才可以简写。
/*                isHot(newVal,oldVal){
                        console.log('isHot被修改了！',newVal,oldVal);
                },*/
            }
        });

        //完整写法
/*        vm.$watch('isHot',{
            immediate:true,     //初始化时，立即调用一次handler
            deep:true,   //深度监视
            //当isHot发生改变时，被调用。
            handler(newVal,oldVal){
                console.log('isHot被修改了！',newVal,oldVal);
            }
        });*/
        //简写
        vm.$watch('isHot',function (newVal,oldVal) {
            console.log('isHot被修改了！',newVal,oldVal);
        })
    </script>
</html>