watch监听属性的使用

李木木~

已于 2023-03-01 22:39:34 修改

阅读量1.6k

点赞数

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

于 2023-03-01 22:22:43 首次发布

本文链接：https://blog.csdn.net/lnbd_/article/details/129291120

版权

Vue2 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

watch监听属性的两种方法

一、什么是watch监听
- 二、
- - 三、watch监听属性的两种简写方法

一、什么是watch监听

watch也就是可以监听到一个值的发生变化的过程，里边分别会有（新值与旧值）两种，它自身的话也会有（immediate 立刻监听 (读法：in美达 )）、（deep 深度监听（读法：迪谱）），当监听复杂数据类型的时候需要开启深度监听才可以监听到值的变化。

2、深度监听
(1)Vue中的watch默认不监听对象内部值的改变（一层）
（2）配置deep：true可以监听到对象数组内部值的改变（多层）
备注：
（1）使用watch时根据数据的具体结构，决定是否采用深度监听

二、

<!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">
    <title>Document</title>
    <script src="./JS/vue.js"></script>
    <style>
        div{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <div>今天天气很{{info ? '炎热' : '凉爽'}}</div>
        <button @click="info = !info">切换</button>

        <div>a的值：{{objs.a}}</div>
        <button @click="objs.a++">点击</button>

        <div>b的值：{{objs.b}}</div>
        <button @click="objs.b++">点击</button>
    </div>

    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                info:true,
                objs:{
                    a:1,
                    b:1,
                }
            },
            watch:{  //第一种监听方法

                 //监听单个(简单数据类型)
                info:{      
                    // immediate:true, //立即监听
                    handler(newvalue,odlvalue){
                        console.log(newvalue,odlvalue,'1111');
                    }
                },

                //监听(复杂数据类型（对象、数组）)中的单个数据       监听多级结果单个数据变化
                'objs.a':{
                    handler(newvalue,odlvalue){
                        console.log(newvalue,odlvalue,'1111');
                    }
                },

                //监听(复杂数据类型所有数据)   监听多级结果所有数据变化
                objs:{
                    deep:true,   //deep深度监听（只有再监听复杂数据类型才需要开启深度监听）
                    handler(newvalue,odlvalue){
                        console.log(newvalue,odlvalue,'1111');
                    }
                }

                
            }
        })

        //第二中监听方法（一般第一种用到的会多一点）      //这种用的是Vue实例上面的监听
        vm.$watch('info',{
            handler(newvalue,odlvalue){
                console.log(newvalue,odlvalue);
            }
        })
    </script>
</body>
</html>

三、watch监听属性的两种简写方法

使用watch简写方法的话就不能配置 立刻监听与深度监听了

`完整写法`
   //第一中监听方法
   //监听(复杂数据类型所有数据)   监听多级结果所有数据变化
                objs:{
                    deep:true,   //deep深度监听（只有再监听复杂数据类型才需要开启深度监听）
                    handler(newvalue,odlvalue){
                        console.log(newvalue,odlvalue,'1111');
                    }
                } 
            }
        })
`第一种简写方法`
          objs(newvalue,odlvalue){
              console.log(newvalue,odlvalue,'1111');
            }


`完整写法`
        //第二中监听方法（一般第一种用到的会多一点）      //这种用的是Vue实例上面的监听
        vm.$watch('info',{
            handler(newvalue,odlvalue){
                console.log(newvalue,odlvalue);
            }
        })

`第二中简写方法`
 vm.$watch('info',function(newvalue,odlvalue){
                console.log(newvalue,odlvalue);
        })