Vue 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>