• 當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作
• 監(jiān)視的屬性必須存在，才能進(jìn)行監(jiān)視
• 監(jiān)視的兩種不同寫(xiě)法（請(qǐng)看 基本用法區(qū)域）

基本用法

寫(xiě)法1：

<div id="root">
        <h2>今天的天氣很{{result}}</h2>
        <input type="button" value="切換" @click="change">
    </div>

<script>
            new Vue({
            data() {
                return {
                    isHot: true
                }
            },
            computed: {
                result() {
                    return this.isHot ? '炎熱' : '涼爽'
                }
            },
            methods: {
                change() { this.isHot = !this.isHot }
            },
            watch:{
                result:{
                    immediate:true,  //初始化時(shí)讓handler調(diào)用下
                    handler(newValue,oldValue){
                        console.log('現(xiàn)在是:'+ newValue + ';' + '原本是:'+ oldValue )
                    }
                }
            }
        
        }).$mount('#root')
        </script>

PS：handler方法 和 immediate 屬性 在什么時(shí)候用呢？ 答案是：在值最初時(shí)候watch就執(zhí)行

寫(xiě)法2（非創(chuàng)建實(shí)例時(shí)）：

        const vm = new Vue({
            data() {
                return {
                    isHot: true
                }
            },
            computed: {
                result() {
                    return this.isHot ? '炎熱' : '涼爽'
                }
            },
            methods: {
                change() { this.isHot = !this.isHot }
            }
           
        
        }).$mount('#root')
        
        vm.$watch('isHot', {
            immediate: true,
            handler(newValue, oldValue) {
                console.log(newValue + '!')
            }
        })

這個(gè)方法是在創(chuàng)建實(shí)例的時(shí)候不知道監(jiān)視什么，后續(xù)用戶調(diào)用的時(shí)候發(fā)現(xiàn)需要監(jiān)視，那么就用這個(gè)方法即可

簡(jiǎn)寫(xiě)（不調(diào)用deep和immediate時(shí)可使用）

例：

watch:{
                result(){
                        console.log('現(xiàn)在是:'+ newValue + ';' + '原本是:'+ oldValue )
                    }
                }

深度監(jiān)視

• （1）Vue中的 watch 默認(rèn)不監(jiān)測(cè)對(duì)象內(nèi)部值的改變（只有一層監(jiān)視）
• （2） 配置deep:true 可以監(jiān)測(cè)對(duì)象內(nèi)部值改變（配置就開(kāi)啟多層監(jiān)視）
• 備注：Vue自身是可以監(jiān)測(cè)到對(duì)象內(nèi)部值的改變的，但是 Vue 提供的 watch 默認(rèn)是不可以的，我們根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視

例：

        <div id="root">
            <h2>a:{{numbers.a}}</h2>
            <input type="button" value="+1" @click="numbers.a++">
        </div>

        <script>
            new Vue({
            data() {
                return {
                    numbers:{
                        a:2,
                        b:1
                    }
                }
            },
            watch:{
                numbers:{
                    deep:true,
                    immediate:true,
                    handler(){
                        console.log('a,改變了')
                    }
                }
            }
        
        }).$mount('#root')

總結(jié)下：
（1）handler 函數(shù)是當(dāng)監(jiān)視對(duì)象發(fā)生改變時(shí)調(diào)用
（2）immediate 默認(rèn)為false ，開(kāi)啟為true。作用是初始化時(shí)就讓 handler 調(diào)用一下（一刷新 handler就立刻運(yùn)行一次）
（3）deep 默認(rèn)為false ，開(kāi)啟為true。開(kāi)啟后作用是深度監(jiān)視