vue的监听属性

最新推荐文章于 2024-03-03 07:45:00 发布

菜里都傻

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量393

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43894816/article/details/135434755

版权

本文详细介绍了如何在Vue应用中使用`watch`监听数据属性的变化，包括设置深度监听、即时触发以及简写方法的使用。通过实例代码演示了如何针对不同场景配置监听器。

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

vue的监听属性

1、使用格式
2、测试代码

vue的监听属性可以用来监听vue的属性变化（data中的属性），当data中的属性发生变化则调用watch中该属性的handle方法。

1、使用格式

watch:{
       【要监控的属性名】:{
       		deep:true,//如果要监控该属性中还有自己的属性并且所有的属性都要监控，则需要把deep设置为true，默认是false
       		immediate:true,//如果想要初始化是就调用handler方法则设置为true，默认为false
            handler(newVal,oldVal){//监听的属性变化是调用handler方法 newVal 新值,oldVal 旧值
                        console.log("handler方法调用了")
                    }
        },
        //如果只需要handler方法可简写
        【要监控的属性名】(){
                        console.log("handler方法调用了")
        },
     
}

2、测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.js"></script>
    <title>vue的监听属性</title>
</head>
<body>
    <div id="app">
        msg:{{msg}}<input type="text" v-model="msg"></input>
    </div>
    <script>
        const vm=new Vue({
            el:"#app",
            data:{
                msg:"vue的监听属性",
                a:{
                    b:1,
                    c:2
                }
            },
            watch:{
                // msg:{
                //     deep:true,
                //     immediate:true,
                //     handler(newVal,oldVal){
                //         console.log("handler方法调用了")
                //     }
                // },
                //如果msg属性直邮handler方法可以用简写方法
                msg(){
                    console.log("handler方法调用了")
                },
                a:{
                    deep:true,
                    handler(newVal,oldVal){
                        console.log("a的handler方法调用了")
                    }
                },
                //如果只需要监听a的b属性可以这样写，一定要主要加单引号
                'a.b':{
                    handler(newVal,oldVal){
                        console.log("a的handler方法调用了")
                    }
                }
            }
        })
    </script>
</body>
</html>