vue监视属性

监视属性

<div id="app">
        <h2>今天天气很：{{isHot?'热':'冷'}}</h2>
        <!-- @xxx='yyyy' yyy可以写一些简单的语句 -->
        <!-- <button @click='isHot = !isHot'>切换天气</button> -->
        <button @click='changeWeather'>切换天气</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                isHot:true
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed:{
                info(){
                    return this.isHot?'热':'冷'
                }
            },
            // watch:{
            //     isHot:{
            //         immediate:true,// 初始化时，让handler调用一下，监视
            //         // 当isHot发生改变时，调用
            //         handler(newValue,oldValue){
            //             console.log('进来了',newValue,oldValue)
            //         }
            //     },
            //     // info:{
            //     //     immediate:true,
            //     //     handler(newValue,oldValue){
            //     //         console.log('进来了',newValue,oldValue)
            //     //     }
            //     // }
            // }
        })
        vm.$watch('isHot',{
            immediate:true,// 初始化时，让handler调用一下，监视
            // 当isHot发生改变时，调用
            handler(newValue,oldValue){
                console.log('进来了',newValue,oldValue)
            }
        })
    </script>

深度监视

<div id="app">
        <h2>今天天气很：{{isHot?'热':'冷'}}</h2>
        <!-- @xxx='yyyy' yyy可以写一些简单的语句 -->
        <!-- <button @click='isHot = !isHot'>切换天气</button> -->
        <button @click='changeWeather'>切换天气</button>
        <br/>
        <button @click="nums.a++">+1{{nums.a}}</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                isHot:true,
                nums:{
                    a:1,
                    v:1
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed:{
                info(){
                    return this.isHot?'热':'冷'
                }
            },
            watch:{
                isHot:{
                    immediate:true,// 初始化时，让handler调用一下，监视
                    // 当isHot发生改变时，调用
                    handler(newValue,oldValue){
                        console.log('进来了',newValue,oldValue)
                    }
                },
                'nums.a':{
                    handler(newValue,oldValue){
                        console.log('进来了',newValue,oldValue)
                    }
                },
                nums:{
                    // 监视多级结构中，所有属性的变化
                    deep:true,
                    handler(newValue,oldValue){
                        console.log('进来了',newValue,oldValue)
                    }
                }
            }
        })

监视属性，简写

    <div id="app">
        <h2>今天天气很：{{isHot?'热':'冷'}}</h2>
        <button @click='changeWeather'>切换天气</button>
        <br/>
        <button @click="nums.a++">+1{{nums.a}}</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#app',
            data:{
                isHot:true,
                nums:{
                    a:1,
                    v:1
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            computed:{
                info(){
                    return this.isHot?'热':'冷'
                }
            },
            watch:{
                // 正常写法
                isHot:{
                    immediate:true,// 初始化时，让handler调用一下，监视
                    // 当isHot发生改变时，调用
                    deep:true, // 深度监视
                    handler(newValue,oldValue){
                        console.log('进来了',newValue,oldValue)
                    }
                },
                // 简写
                isHot(newValue,oldValue){
                    console.log('进来了',newValue,oldValue)
                }
            }
        })
        // 正常写法
        // vm.$watch('isHot',{
        //     immediate:true,
        //     deep:true,
        //     handler(newValue,oldValue){
        //         console.log('进来了',newValue,oldValue)
        //     }
        // })
        // 简写
        vm.$watch('isHot',function(newValue,oldValue){
            console.log('进来了',newValue,oldValue)
        })
    </script>

计算属性不能开启异步实现，监听事件可以开启异步实现

这个要写成，箭头的