Vue中的watch监听-Vue-前端日记簿

首页 Vue 正文

Vue中的watch监听

2023-06-02 79

1. 基本用法

使用watch来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性一定是data 中已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

2. 案例讲解-验证用户名

<!DOCTYPE html>
<html>
<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>
</head>
<body>
       
    <div id="app">

        <div>
            <span>名：<input type="text" v-model="firstName"></span> <span>{{firstName}}</span>
            <span>姓：<input type="text" v-model="lastName"></span> <span>{{lastName}}</span>
            <span>全名：</span> <span>{{fullName}}</span>

        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            // 模板选择器
            el:'#app',
            // 数据中心
            data(){
                return {
                    firstName:'',
                    lastName:'',
                    fullName:''
                }
            },
            // 侦听器
            // 监听 数据中心data中已有数据的变化。
            // val 变化之后的新值
            watch:{
                // 侦听器中 所写的属性，要与 数据中心data中的 属性 对应上
                // 例如：  这里firstName  对应着data 中的 firstName 
                //  当 firstName 值 改变的时候， 会自动触发 watch
                firstName:function(val){
                    console.log('变化之后的新值:'+ val);
                    this.fullName = val +  ' ' + this.lastName;
                },
                //  这里 lastName 对应着data 中的 lastName
                //  当 lastName 值 改变的时候， 会自动触发 watch
                lastName:function(val){
                    console.log('变化之后的新值:'+ val);
                    this.fullName = this.firstName + '' + val;
                }
            },
            // 方法中心
            methods:{

            }
        })
    </script> 
</body>
</html>

控制台打印监听的数据

监听的数值类型有：

一般数据指的是基础类型的数据（数字，字符串，布尔，null，undefined）

监听数值的变化

<!DOCTYPE html>
<html>
<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>
</head>
<body>
       
    <div id="app">
        <h1>watch 监听数据的数据类型可以是 数值类型的数据</h1>

        <p>{{num}}</p>
        <button @click="num++;">自增</button>
        <hr>
        <h3>num的变化由 {{oldNum}}  变化为 {{newNum}}   </h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    num:1, //数值类型的数据
                    oldNum:'', //刚刚的旧值
                    newNum:'' //现在的新值
                }
            },
            // 侦听器
            // 侦听的数据，一定是要在数据中心中 存在的数据
            // newVal 变化之后的新值
            // oldVal 没有变化前的旧值
            watch:{
                // watch中 写属性  的 三种 常用 写方法，如下所示：
                // 写法1：es5的语法
                // num:function(newVal,oldVal){
                //     this.newNum = newVal;
                //     this.oldNum = oldVal;
                // }

                // 写法2：es6的语法
                // num(newVal,oldVal){
                //     this.newNum = newVal;
                //     this.oldNum = oldVal; 
                // }

                // 写法3： vue中的写法
                num:{
                    // 处理“监听数据变化时”的函数 --- 当watch监听到数据变化的时候，这个方法，会被立刻调用执行。
                    handler(newVal,oldVal){
                        this.newNum = newVal;
                        this.oldNum = oldVal; 
                    }
                }


            },
            methods:{

            }
        })
    </script> 
</body>
</html>

预览：

3.2 监听布尔值的变化

<!DOCTYPE html>
<html>
<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>
</head>
<body>
       
    <div id="app">
        <h1>watch 监听数据的数据类型可以是布尔类型的数据</h1>
        <hr>
        <button @click="change">点击，切换背景颜色</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    flag:false
                }
            },
            // 侦听器
            // 侦听的数据，一定是要在数据中心中 存在的数据
            // newVal 变化之后的新值
            // oldVal 没有变化前的旧值
            watch:{
                flag(newVal,oldVal){
                    console.log('旧值：'+oldVal + '|' + '；新值：'+ newVal);
                    this.bgColor(newVal);
                }
            },
            methods:{
                change(){
                    this.flag = !this.flag;
                },
                bgColor(val){
                    if(val){
                        document.body.style.backgroundColor = 'lightblue';
                    }else{
                        document.body.style.backgroundColor = 'lightgreen';
                    }
                }
            }
        })
    </script> 
</body>
</html>

预览：

3.3 监听对象变化，需进行deep深度侦听

深度侦听 deep设置为true

deep 属性：深度监听对象变化 (代表是否深度监听)当需要监听一个对象的改变时，普通的 watch 无法监听到对象内部属性的改变，此时就需要 deep 属性对对象进行深度监听。

vue 是不能检测到对象属性的添加或删除，我们使用 watch 监听一个对象时，除非是直接重新给对象赋值，否则是不能监听到对象里的属性值的变化的。deep 就是用来进行深度监听的！deep:false //值为 true 或 false，默认 false

deep 为 true把 deep 设为 true 后，就可以得到我们想要的结果了，可以监听到对象属性的变化。

<!DOCTYPE html>
<html>
<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>
</head>
<body>
       
    <div id="app">
        <h1>watch 监听数据的数据类型可以是 对象</h1>
        <h1>监听对象变化，需进行deep深度侦听</h1>
        <hr>
        <div>
            <input type="text" name="" id="" v-model="msg.text">
            <br>
            你输入的内容是：{{msg.text}}
            <hr>
            <h3>我们使用侦听器watch，侦听到的值是:<span style="color:red;">{{content}}</span></h3>
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    msg:{text:''},
                    content:''
                }
            },
            // 侦听器
            // 对数据中心的数据 进行侦听
            // watch侦听对象的时候，旧值和新值 一样。所以我们不侦听旧值
            watch: {
                msg:{
                    // 注意：val是一个对象，如果你想从对象中 获取 某某属性，我们要写 xxx.xxx
                    handler(val){
                        console.log(val);
                        this.content = val.text;
                    },
                    // 深度侦听
                    deep:true
                }
            },
            methods:{

            }
        })
    </script> 
</body>
</html>

预览：

watch中immediate 属性的应用

immediate的作用：控制侦听器是否自动触发一次!（记住这句话即可！）

就是当值第一次绑定时，不会执行 handler()监听函数，只有值发生改变时才会执行 handler()监听函数。如果我们需要在最初绑定值的时候也执行函数，则就需要用到 immediate 属性。

immediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听。只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值。

 <div id="app">
        <div>
            a等于 {{a}}
            <button @click="a=a+10">a+10</button>
        </div>
    </div>
    
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            // 模板选择器
            el:'#app',
            // 数据中心
            data(){
                return {
                   a:1
                }
            },
            watch:{
                a:{
                    handler(newVal,oldVal){
                        console.log('a的默认值是：'+oldVal);
                        console.log('点击a+10后，我的值是:'+newVal);
                    },
                    immediate:true,
                    deep:false
                }
            },
            methods:{
    
            }
        })
    </script>

预览：

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=8

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。