监视属性.

最新推荐文章于 2024-04-26 17:24:28 发布

pqxpq

最新推荐文章于 2024-04-26 17:24:28 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/qq_52563729/article/details/129439599

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章介绍了Vue.js中如何使用watch对象来监视属性的变化，当属性如`ishot`的值改变时，会自动调用回调函数。展示了两种定义watcher的方法：在实例创建时直接定义和后期动态添加。还提到了简写形式以及如何进行深度监视，例如对于多级结构的数据如`num.a`，在需要监听整个对象`num`变化时，需设置`deep:true`以检测内部属性的变化。

摘要由CSDN通过智能技术生成

什么是监视属性，监控一个属性的变化，当属性发生改变的时候回调函数自动调用

这里的例子是监控天气信息的变化

<body>
    <div id="root1">
        <div>今天的天气是{{info}}</div>
        <button @click="chat">点击切换天气</button>
    </div>
    <script>
        new Vue({
            el:"#root1",
            data:{
                ishot:true
            },
            computed:{
                info(){
                    return this.ishot?"炎热":"凉爽"
                }
            },
            methods:{
                chat(){
                    this.ishot=!this.ishot
                }
            },
            watch:{
                ishot:{
                    handler(newvalue,oldvalue){
                        console.log("天气变了",newvalue," ",oldvalue);
                    }
                }
            }
        })
    </script>
</body>
</html>

下面就是我们的监控属性

watch:{
                ishot:{
                    handler(newvalue,oldvalue){
                        console.log("天气变了",newvalue," ",oldvalue);
                    }
                }
            }

监控属性的两种写法：

第一种：

就是像上面一样，当我们在创建vue实例的时候知道什么需要监控，那么我们就直接选择监控这个属性，但是如果我们一开始不知道要监控这个属性，那么后面添加的属性就可以使用第二种方法来

第二种：

    <script>
        const vm=new Vue({
            el:"#root1",
            data:{
                ishot:true
            },
            computed:{
                info(){
                    return this.ishot?"炎热":"凉爽"
                }
            },
            methods:{
                chat(){
                    this.ishot=!this.ishot
                }
            },
        })
        vm.$watch('ishot',function(newvalue,oldvalue){
            console.log("天气变了",newvalue," ",oldvalue)
        })
    </script>

简写

如果我们不需要其他属性（第一次初始化，深度监视等等我们可以简写）

不简写的方式：

watch:{
                ishot:{
                    handler(newvalue,oldvalue){
                        console.log("天气变了",newvalue," ",oldvalue);
                    }
                }
            }

简写：

watch:{
                ishot(newvalue,oldvalue){
                        console.log("天气变了",newvalue," ",oldvalue);
                    }
                }

深度监视

这样我们就可以检测多级结构里面的a的变化了

多级结构：
在这里插入图片描述

    <div id="root1">
        <div>a的值是{{num.a}}</div>
        <div>b的值是{{num.b}}</div>
        <button @click="chata">点击后a++</button>
    </div>
    <script>
        const vm=new Vue({
            el:"#root1",
            data:{
                num:{
                    a:1,
                    b:1,
                }
            },
            methods: {
                chata(){
                    this.num.a++;
                }
            },
            watch:{
                'num.a'(newv,oldv){
                    console.log("a变化了  ",newv,"  ",oldv);
                }
            }
        })
    </script>

新代码：

<body>
    <div id="root1">
        <div>a的值是{{num.a}}</div>
        <div>b的值是{{num.b}}</div>
        <div>num的值是{{num}}</div>
        <button @click="chata">点击后a++</button>
    </div>
    <script>
        const vm=new Vue({
            el:"#root1",
            data:{
                num:{
                    a:1,
                    b:1,
                }
            },
            methods: {
                chata(){
                    this.num.a++;
                }
            },
            watch:{
                'num'(newv,oldv){
                    console.log("num变化了  ",newv,"  ",oldv);
                }
            }
        })
    </script>
</body>

假设这个时候我们需要检测num的变化，意思就是num里面的属性发生一次改变我们就进行一次+1，那我们原来的代码行不行？试试

在这里插入图片描述

不行，并没有显示num变化，因为我们num的地址没有变化，只有number的地址变化的时候才会发生变化：

例子：

在这里插入图片描述
这样num就发生了变化，那么我们如果想实现num的改变怎么办呢？？vue提供的watch默认不能检测多层级改变，添加一个属性deep:true

    <div id="root1">
        <div>a的值是{{num.a}}</div>
        <div>b的值是{{num.b}}</div>
        <div>num的值是{{num}}</div>
        <button @click="chata">点击后a++</button>
        <button @click="num={a:111,b:222}">新弄一个num</button>
    </div>
    <script>
        const vm=new Vue({
            el:"#root1",
            data:{
                num:{
                    a:1,
                    b:1,
                }
            },
            methods: {
                chata(){
                    this.num.a++;
                }
            },
            watch:{
                'num':{
                    deep:true,
                    handler(){
                        console.log("num变化了");
                    }
            }
            }
            
        })