vue學習---深度監視

阿新 • • 發佈：2021-11-13

深度監視： (1).Vue中的watch預設不監測物件內部值的改變（一層）。 (2).配置deep:true可以監測物件內部值改變（多層）。備註： (1).Vue自身可以監測物件內部值的改變，但Vue提供的watch預設不可以！ (2).使用watch時根據資料的具體結構，決定是否採用深度監視。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>天氣案例_深度監視</title>
        <!-- 引入Vue --> 

        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
                深度監視：
                        (1).Vue中的watch預設不監測物件內部值的改變（一層）。
                        (2).配置deep:true可以監測物件內部值改變（多層）。
                備註：
                        (1).Vue自身可以監測物件內部值的改變，但Vue提供的watch預設不可以！
                        (2).使用watch時根據資料的具體結構，決定是否採用深度監視。
          
-->
        <!-- 準備好一個容器-->
        <div id="root">
            <h2>今天天氣很{{info}}</h2>
            <button @click="changeWeather">切換天氣</button>
            <hr/>
            <h3>a的值是:{{numbers.a}}</h3>
            <button @click="numbers.a++"> 
點我讓a+1</button>
            <h3>b的值是:{{numbers.b}}</h3>
            <button @click="numbers.b++">點我讓b+1</button>
            <button @click="numbers = {a:666,b:888}">徹底替換掉numbers</button>
            {{numbers.c.d.e}}
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
        
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                    c:{
                        d:{
                            e:100
                        }
                    }
                }
            },
            computed:{
                info(){
                    return this.isHot ? '炎熱' : '涼爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    // immediate:true, //初始化時讓handler呼叫一下
                    //handler什麼時候呼叫？當isHot發生改變時。
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                },
                //監視多級結構中某個屬性的變化
                /* 'numbers.a':{
                    handler(){
                        console.log('a被改變了')
                    }
                } */
                //監視多級結構中所有屬性的變化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改變了')
                    }
                }
            }
        })

    </script>
</html>