vue中监听属性watch使用详解

深度监听：

（1）vue中的watch默认不监测对象内部值的改变（一层）。

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

备注：

（1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以。

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

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
              a:1,
              b:1
            }
        },
        methods:{
            // 方法一
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        computed:{
            // 方法二
            info(){
                return this.isHot?'炎热':'凉爽'
            }
        },
        watch:{
            // 方法三
            // 正常写法
            isHot:{
              // immediate:true, //初始化时让handler调用一下
              // handler什么时候调用？当isHot发生改变时。
              handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
              }
            }
            // 简写
            isHot(newValue,oldValue){
              console.log('isHot被修改了',newValue,oldValue)
            },
            // 深度监听
            numbers:{
              deep:true,
              handler(){
                console.log('numbers被修改了')
              }
            }
        },
    })
</script>