VueでのWatchの詳細

13292 ワード
Vue
Watchの概要
オブジェクトで、キーは観察が必要な式で、値は対応するコールバック関数です.値は、メソッド名またはオプションを含むオブジェクトであってもよい.Vueインスタンスは、インスタンス化時に$watch()を呼び出し、watchオブジェクトの各プロパティを巡ります.
簡単なリスニング
<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: ''
        },
        watch: {
            num(newVal, oldVal) {
            //    num        
    		//    :    num       ,         
    		//       :   
    		//       :   ,    
                console.log('oldVal:',oldVal)
                console.log('newVal:',newVal)
            }
        }
    })
</script>
</body>

immediate(ページに入るとすぐにトリガーされます)
<body>
<div id="app">
    <input type="text" v-model="num">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 1
        },
        watch: {
            num: {
            	//                 
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                //             
                immediate: true
            }
        }
    })
</script>
</body>

deep(深度リスニング)
オブジェクトと配列は参照タイプであり、参照タイプ変数はアドレスで保存され、アドレスは変化しないのでwatchはトリガーされません.この場合、深度リスニングが必要です.trueの値を持つ属性deepを追加する必要があります.
<body>
<div id="app">
    <input type="button" value="    " @click="change">
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            food: {
                id: 1,
                name: '   '
            }
        },
        methods: {
            change() {
                this.food.name = '   '
            }
        },
        watch: {
        	//      ：      ，            handler
        	//   ：        ，handler       newVal    oldVal      
            food: {
                //                  
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                //             
                immediate: true,
                //           
                deep: true
            },
            //      ：         ，                 
            //      ，    newVal    oldVal     
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   //    
                console.log('newVal:', newVal)   //    
            }
        }
    })
</script>
</body>

Watchとcomputedの違い
Watch
ページ上のvueインスタンスを観察およびリスニングするには、データ変化応答が必要な場合に非同期操作を実行するか、高性能消費の操作を実行する必要がある場合にwatchが最適です.
computed
    は、複数のリアルタイム計算オブジェクトを関連付けることができます.これらのオブジェクトのいずれかが変更されると、このプロパティ   はキャッシュ機能を持つため、データが再び変更されると再レンダリングされます.そうしないと、キャッシュ内のデータが直接取得されます.
vueイベントトリガCSS 3アニメーション
vue element-ui tableスクロールバー位置キャッシュ