Vue的监视属性-天气案例

一、天气案例 copy

HTML代码： 

<div id="root">
        <h2>今天天气很{{Info}}</h2>
        <!--绑定事件的时候： @xxx='yyy' yyy可以写一些简单的语句-->
        <!-- <button @click='isHot=!isHot'>切换天气</button> -->
        <button @click='Weather'>切换天气</button>
    </div>

JavaScript代码：

<script>
        Vue.config.productionTip = false

        const vm=new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                Info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                Weather(){
                    this.isHot=!this.isHot
                }
            },
        })
    </script>

---

二、监视属性watch

           1.当被监视的属性变化时，回调函数自动调用，进行相关操作。

           2.监视的属性必须存在，才能进行监视！！

           3.监视的两种写法：

            (1).new Vue时传入watch配置。

            (2).通过vm.$watch监视。

 JavaScript代码：

<script>
        Vue.config.productionTip = false

        const vm=new Vue({
            el:'#root',
            data:{
                isHot:true
            },
            computed:{
                Info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                Weather(){
                    this.isHot=!this.isHot
                }
            },
            /*watch:{
                isHot:{
                    immediate:true,//初始化让handler调用一下
                    //handler什么时候调用？当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                },
                Info:{
                    immediate:true,//初始化让handler调用一下
                    //handler什么时候调用？当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log('Info被修改了',newValue,oldValue);
                    }
                }
            }*/

            
        })
        vm.$watch('isHot',{
                immediate:true,//初始化让handler调用一下
                    //handler什么时候调用？当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log('Info被修改了',newValue,oldValue);
                    }
            })
    </script>

---

三、深度监视

             1.Vue中的watch默认不监测对象内部值的改变(一层)。

             2.配置deep:true可以监测对象内部值改变(多层)。

        备注：

             1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

             2.使用watch时根据数据的具体结构，决定是否采用深度监测。

HTML代码：

<div id="root">
        <h2>今天天气很{{Info}}</h2>
        <button @click='Weather'>切换天气</button>
        <hr>
        <h3>a的值是：{{numbers.a}}</h3>
        <button @click='numbers.a++'>点我让a++</button>
        <h3>b的值是：{{numbers.b}}</h3>
        <button @click='numbers.b++'>点我让b++</button>
        <button @click='numbers={a:222,b:333}'>点我彻底改变numbers</button>
    </div>

JavaScript代码：

<script>
        Vue.config.productionTip = false

        const vm=new Vue({
            el:'#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            computed:{
                Info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                Weather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                isHot:{
                    immediate:true,//初始化让handler调用一下
                    
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                }
                //监视多级结构中某个属性的变化
                // 'numbers.a':{
                //     handler(){
                //         console.log('a被改变了');
                //     }
                // }

                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log('numbers改变了');
                    }
                }
            }

            
        })
        
    </script>

---

四、computed和watch之间的区别

1.computed能完成的功能，watch都能完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

 

两个重要原则:

             1.所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

             2.所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm或组件实例对象