Vue watch、computed 数据监听

Z时代
2024-01-10
分类：综合

vue

数据监听用于监听内存变量值的变化，当值变化时做一些处理。

比如将搜索框绑定一个双向绑定一个变量，搜索框的内容改变时，提供对应的预选项；

比如选择地区，省份双向绑定一个板顶当选择的省份变化时，列出的该省下辖的地区也要对应发生改变。

watch是监听单个单个变量值的变化，computed是同时监听多个变量值的变化。

watch 监听单个变量值的变化

　　 <div id="app">
        <input type="text" name="" v-model="content" /><br />  <!--双向绑定一个变量-->
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){ 
                return {
                    content:''  //需要给变量赋初值
                }
            },
            watch:{ //注意写法，watch后面直接冒号，{}表示一个对象
                // 定义一个变量监听，watch中也只能顶一个
                content(newVal,oldVal){  //要监听的变量(新值,旧值){  },参数名任意，但依次是新值、旧值，顺序是固定的
                    console.log(newVal,oldVal);
                    if(newVal=='love'){
                        alert("the content is love");    
                    }
                }    
            }
        });
    </script>

watch的深度监听

如果监听的是对象、数组这种复杂类型的变量，需要使用深度监听才有效。

深度监听会一级一级往下监听到对象的属性、数组元素。

　　<div id="app">
        姓名：<input type="text" name="" v-model="user.name" /><br />  <!--双向绑定到一个user对象的name属性-->
        年龄：<input type="text" name="" v-model="user.age" /><br /> 
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){ 
                return {
                    user:{  //返回一个user对象
                        name:'',  //赋初值
                        age:'' //输入框，都是作为字符串处理
                    }
                };
            },
            watch:{ 
                user:{ //要监听的复杂类型的变量
                    handler(newVal){ //函数名是固定的，只能是handler
                            console.log(newVal);  //深度监听只记录新值、不记录旧值。如果硬要写上oldValue，oldValue的值和newValue的值一样，都是新值
                            if(newVal.name=='chy' && newVal.age==20){
                                alert("the name is chy and the age is 20");    
                            }
                    },
                    deep:true  //开启深度监听
                }
            },
        });
    </script>

我绑定的是user对象的name属性，能不能直接监听name字段，这样就不使用深度监听了？

不行，监听的要是变量，对象本身是一个变量，对象的属性并不是一个变量。

computed 同时监听多个变量值的变化

    <div id="app">
        加数：<input type="text" name="" v-model="n1" /><br />
        另一个加数：<input type="text" name="" v-model="n2" /><br />
        和：<span>{{sum}}</span> <!--只能用{{}}，不能用v-model来绑定。v-model只能是变量，{{}}中可以是变量、函数-->
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){ 
                return {
                    n1:'',
                    n2:''  //不能初始化sum
                };
            },
            computed:{ //watch只能监听一个变量的变化，computed可以同时监听多个，比如此处就监听了n1、n2，只要其中一个变化就会调用函数
                sum(){ //作为函数名
                    return Number(this.n1)+Number(this.n2); //引用v-model绑定的变量时，要用this来引用。Number(String)可以将字符串转换为数值
                }
            }
        });
    </script>