监视属性/深度监视 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--vs插件：vue 3 snippets -->
        <!-- 监视属性 
                1.当被监视的属性发生变化时，回调函数回自动调用，进行相关操作，
                2.监视的属性必须存在，才能进行监视
                3.监视的两种写法：
                    （1）：在new Vue里写watch
                    （2）：通过实例.$watch()监视
            -->
        <!--深度监视
                1.vue中的watch默认不监测对象内部值的改变（一层）
                2.配置deep:true可以监测对象内部值的改变（多层）
            备注：
                1.vue自身可以监测对象内部值变化，但提供的watch默认不可以
                2.使用watch时根据数据的具体结构，决定是否采用深度监视
                -->
        <div id="app">
            <h2>今天天气很{{info}}</h2>
            <button @click="change">切换天气</button>
            <h3>a的值是{{nums.a}}</h3>
            <h3>b的值是{{nums.b}}</h3>
            <button @click="nums.a++">a++</button>
        </div>
            <script type="text/javascript">
                new Vue({
                    el:"#app",
                    data:{
                        isHot:true,
                        nums:{
                            a:1,
                            b:2
                        }
                    },
                    methods:{
                        change(){
                            this.isHot = !this.isHot
                        }
                    },
                    computed:{
                        info(){
                            return this.isHot ? '炎热':'凉爽'
                        }
                    },
                    watch:{
                        /*
                        如果不需要深度监视，immediate，只有handler可以简写
                        isHot(newVal,oldVal){
                            console.log(newVal,oldVal)
                        }*/
                        isHot:{
                            //immediate:true,//初始化时，让handler调用一下
                            handler(newVal,oldVal){
                                console.log(newVal,oldVal)
                            }
                        },
                        // 监视多级结构中的某个属性变化（只监听a数值变化）
                        'nums.a':{
                            handler(val){
                                console.log('a变化了'+val)
                            }
                        },
                        //监视多级结构中所有属性的变化
                        nums:{
                            deep:true,
                            handler(val){
                                console.log('变化了'+val)
                            }
                        }
                    }
                })
            </script>
    </body>
</html>

 

posted @ 2021-08-17 19:44  幻影之舞  阅读(264)  评论(0)    收藏  举报