VUE中watch用法

一、 watch是什麼？

監測 Vue 實例變化的一個表達式或方法。回調函數得到的參數爲新值和舊值，用一個函數取代。
簡潔的說：watch的作用可以監控一個值的變換，並調用因爲變化需要執行的方法。可以通過watch動態改變關聯的狀態。

二、應用

**當watch檢測對象/數組的情況

 

<template>
    <div>
        <p>a: {{a}}</p>
        <p>a: <input type="text" v-model="a"></p>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data(){
            return{
               a:'2'
            }
        },
        watch: {
            a: {
                handler(newVal, objVal) {
                        console.log(11);
                },
            }
        }
    }
</script>

控制檯打印如下

 

image.png

watch中deep屬性

當監測爲對象的時候（非數組情況），deep = true 可以監測對象中屬性的變化，並且（監測爲對象的時候，newVal == oldVal）

 

<template>
    <div>
        <p>obj.a: {{obj.a}}</p>
        <p>obj.a: <input type="text" v-model="obj.a"></p>
    </div>
</template>
<script>
    export default {
        name: 'index',
        data(){
            return{
                obj:{
                    a:'初始值'
                }
            }
        },
        watch: {
            obj: {
                handler(newVal, objVal) {
                   // if(newVal.obj || objVal.obj != objVal.obj){
                    //    console.log(22);    //控制檯並沒有打印   監測爲對象的時候，newVal == oldVal
              //      }
                          console.log(33)    //打印爲33
                },
                deep:true
            }
        }
    }
</script>

image.png

watch中immediate屬性

進入組件的時候，第一次並不會執行watch，是因爲immediate 默認 false
當 immediate = true 的時候，進入組件會立即執行。並且可以監測到組件傳遞數據。

最後一點，在watch中不要使用箭頭函數，因爲箭頭函數中的this是指向當前作用域

https://www.jianshu.com/p/9626712bedec