Vue watch侦听属性

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

书院二层楼

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

阅读量115

点赞数

分类专栏： Vue JS

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108870022

版权

Vue 同时被 2 个专栏收录

62 篇文章 3 订阅

订阅专栏

61 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中watch对象的使用，包括基础的侦听属性、对象形式的侦听以及深度监听。通过示例代码展示了如何在数据变化时更新相关属性，并对newVal和oldVal进行了说明。同时，还探讨了对象属性和对象整体变化时的监听处理方式。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>watch侦听属性</title>
</head>
<body>
    <div id="test">
        <ul>
            <li>{{msg}}</li>
            <li>{{msg01}}</li>
            <li>{{msg02}}</li>
            <li>{{msg03}}</li>
            <br>
            {{info.a}} -- {{info.b}}
        </ul>
    </div>
    <script>
        /*
        *  类型：{ [key: string]: string | Function | Object | Array }
        *  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，
        *  遍历 watch 对象的每一个 property。
        */
    
        const app =new Vue({
            el:"#test",
            data:{
                msg:"Hello watch",
                msg01:"",
                msg02:"",
                msg03:"",
                info:{
                    a:1,
                    b:2
                },
            },
            watch: {
                /*
                含税形式
                msg(newVal,oldVal){
                    this.msg01 = newVal + "01";
                    this.msg02 = newVal + "02";
                    this.msg03 = newVal + "03";
                }
           
            */

                //对象形式
                msg:{
                    handler:function(newVal,oldVal){
                        this.msg01 = newVal + "01";
                        this.msg02 = newVal + "02";
                        this.msg03 = newVal + "03";
                        console.log(newVal,oldVal);
                    },
                    //立即执行
                    immediate:true,
                },
                info:{
                    // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
                    handler:function(newVal,oldVal){
                        console.log("监听整个对象");
                        console.log(newVal.a,oldVal.a);
                    },
                    //深度监听，不加的话，a变化，handler不会执行
                    deep:true,
                },
                "info.a":{
                    // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是不一样的
                    handler:function(newVal,oldVal){
                        console.log("监听对象中的某个值");
                        console.log(newVal,oldVal);
                    },
                }
            },
        })
    </script>
</body>
</html>

效果截图