欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue watch、computed 数据监听

程序员文章站 2022-07-09 18:38:10
数据监听用于监听内存变量值的变化,当值变化时做一些处理。 比如将搜索框绑定一个双向绑定一个变量,搜索框的内容改变时,提供对应的预选项; 比如选择地区,省份双向绑定一个板顶当选择的省份变化时,列出的该省下辖的地区也要对应发生改变。 watch是监听单个单个变量值的变化,computed是同时监听多个变 ......

 

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

 

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

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

 

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>