一、監(jiān)視屬性watch

1、當被監(jiān)視的屬性變化時，回調函數(handler)自動調用，進行相關操作
2、監(jiān)視的屬性必須存在，才能進行監(jiān)視！！
3、監(jiān)視的兩種寫法：

• (1)、 new Vue是傳入watch配置
  (2)、通過 vm.$watch監(jiān)視

舉例：

 <div id="root">
        <h2>今天天氣{{ info }}</h2>
        <button @click="change">切換天氣</button>
</div>
<script>
    Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示

    //創(chuàng)建Vue實例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            isHot: true,
        },

        computed: {
            info() {
                return this.isHot ? '炎熱' : '涼爽'
            }
        },
        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },

        //在vm中監(jiān)視
        // watch : {
        //     isHot : {
        //         // immediate : true,  //初始化時，讓handler調用一下
        //         // handler什么時候調用？ 當isHot發(fā)生改變時
        //         handler(newValue,oldValue){
        //             console.log('isHot被修改了',newValue,oldValue);
        //         },
        //     },
        // },


    });


    //在vm外部監(jiān)視
    vm.$watch('isHot', {
        // immediate : true,  //初始化時，讓handler調用一下
        // handler什么時候調用？ 當isHot發(fā)生改變時
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue);
        },
    })

    // console.log(vm);

</script>

二、深度監(jiān)視：

1、Vue中的watch默認不監(jiān)測對象內部值的變化(一層)
2、配置deep:true可以監(jiān)測對象內部值改變(多層)

1、Vue自身可以監(jiān)測對象內部值的改變，但Vue提供的watch默認不可以
2、使用watch時根據數據的具體結構，決定是否采用深度監(jiān)視

舉例：

 <div id="root">
        <h2>今天天氣{{ info }}</h2>
        <button @click="change">切換天氣</button>
        <hr/>
        
        <h3>a的值是 :{{numbers.a}}</h3>
        <button @click="numbers.a++">點我讓a+1</button>
        <hr/>

        <h3>b的值是 :{{numbers.b}}</h3>
        <button @click="numbers.b++">點我讓b+1</button>
        <button @click="numbers = {a : 55,b:77}">徹底替換到numbers</button>
</div>
<script>
    Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示

    //創(chuàng)建Vue實例
    const vm = new Vue({   //ViewModel
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },

        computed: {
            info() {
                return this.isHot ? '炎熱' : '涼爽'
            }
        },

        methods: {
            change() {
                this.isHot = !this.isHot;
            }
        },

        watch: {
            isHot: {
                immediate : true,  //初始化時，讓handler調用一下
                // handler什么時候調用？ 當isHot發(fā)生改變時
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue);
                },
            },

            // 監(jiān)視多級結構中，某個屬性的變化
            // 'numbers.a' : {
            //     handler(){
            //         console.log('a變了');
            //     }
            // },

            // 監(jiān)視多級結構中，所有屬性的變化
            numbers : {
                deep : true,
                handler(){
                    console.log(111);
                    console.log('numbers變了');
                }
            },        
        },
    });
</script>

computed和watch之間的區(qū)別

1、computed能完成的功能，watch都可以完成
2、watch能完成的功能，computed不一定能完成，例如：watch可以進行異步操作
兩個重要的小原則：
1、所被Vue管理的函數，最好寫成普通函數，這樣this的指向才是vm 或 組件實例對象
2、所有不被Vue所管理的函數(定時器的回調函數、ajax的回調函數等等)，最好寫成箭頭函數，
這樣this的指向才是 vm 或 組件實例對象