04-VUE的侦听属性

04-侦听属性

---

1.前言

想实现一个点击转换天气的效果，我们可以通过computed计算属性来实现

<div id="root">
    <h5>今天天气真{{Info}}</h5>
    <!--绑定事件的时候：@xxx="yyy"，yyy可以写一些简单的语句-->
    <button @click="isHot=!isHot">切换天气</button>
</div>
<script>
    Vue.config.productionTip=false;
    const vm=new Vue({ 
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            Info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
    })
</script>

其中我们可以通过VUE的侦听属性监听isHot数值的变化

---

2.侦听属性

监视（侦听）属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作

Vue.config.productionTip=false;
const vm=new Vue({ 
    el:'#root',
    data:{
        isHot:true,
    },
    computed:{
        Info(){
            return this.isHot?'炎热':'凉爽'
        }
    },
    watch:{
        isHot:{
            //hand1er什么时候被调用？当isHot发生改变时
            handler(newValue,oldValue){
                console.log("isHot被修改",newValue,oldValue);
            }
        }
    }
})

注意被监听的属性每变化一次，监听属性就会被调用一次，可以通过immediate:true实现初始化时让handler调用一下

watch:{
    isHot:{
        immediate:true,  //初始化时让handler调用一下
            //hand1er什么时候被调用？当isHot发生改变时
            handler(newValue,oldValue){
            console.log("isHot被修改",newValue,oldValue);
        }
    }
}

2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置

Vue.config.productionTip=false;
const vm=new Vue({ 
    el:'#root',
    data:{
        isHot:true,
    },
    watch:{
        isHot:{
            handler(newValue,oldValue){
                console.log("isHot被修改",newValue,oldValue);
            }
        }
    }
})

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

vm.$watch('isHot',{
    immediate:true,
    handler(newValue,oldValue){
        console.log("isHot被修改",newValue,oldValue);
    }
})

---

3.深度侦听

<div id="root">
    <h5>今天天气真{{Info}}</h5>
    <button @click="isHot=!isHot">切换天气</button>
    <h3>a的值是{{number.a}}</h3>
    <button @click="number.a++">点我让a加一</button>
    <h3>b的值是{{number.b}}</h3>
    <button @click="number.b++">点我让b加一</button>
</div>

深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）

Vue.config.productionTip=false;
const vm=new Vue({ 
    el:'#root',
    data:{
        isHot:true,
        number:{
            a:1,
            b:2
        }
    },
    computed:{
        Info(){
            return this.isHot?'炎热':'凉爽'
        }
    },
    watch:{
        isHot:{
            handler(newValue,oldValue){
                console.log("isHot被修改",newValue,oldValue);
            }
        },
        // 监视多级结构中某个属性的变化
        number:{
            handler(newValue,oldValue){
                console.log("number.a的值被改变");
            }
        },
    },
})

侦听属性默认是侦听不到对象内部的值的变化的，所以number内部的a和b变化时并不会引起侦听属性的调用

如果想让侦听对象内部的值的变化，我们只能指定内部的值为侦听对象

watch:{
    isHot:{
        handler(newValue,oldValue){
            console.log("isHot被修改",newValue,oldValue);
        }
    },
        // 监视多级结构中某个属性的变化
        'number.a':{
            handler(newValue,oldValue){
                console.log("number.a的值被改变");
            }
        },
        'number.b':{
            handler(newValue,oldValue){
               console.log("number.b的值被改变");
            }
         },
},

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

number:{
    // 监视多级结构中所有属性的变化
    deep:true,
        handler(newValue,oldValue){
        console.log("number中的值被改变");
    }
},

备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watchl时根据数据的具体结构，决定是否采用深度监视

---

4.watch的简写

watch:{
        // 简写方式
        isHot(newValue,oldValue){
            console.log("isHot被修改",newValue,oldValue);
        } 
},

vm.$watch('isHot',function(newValue,oldValue) {
    console.log("isHot被修改",newValue,oldValue);
})

---

5.watch和computed之间的区别

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

两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，
1.computedi能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，
这样this的指向才是vm或组件实例对象。