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の深さリスニング
オブジェクト、配列という複雑なタイプの変数をリスニングする場合は、深度リスニングを使用する必要があります.
深度リスニングでは、オブジェクトのプロパティ、配列要素が1レベルずつリスニングされます.

　　<div id="app">
          ：<input type="text" name="" v-model="user.name" /><br />  
          ：<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> 
    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>