watch | 监视属性

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            isHost: true
        } w
    atch: {
            isHost: {
                immediate: true,//初始化时让 handler 调用一下
                //handler什么时候调用？当 isHot 发生改变时。
                handler(newValue, oldVlaue) {
                    console.log(newValue, oldVlaue);
                }
            }
        }
    })
</script>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            isHost: true
        }
    })
    vm.$watch('isHost', {
        immediate: true,
        handler(newValue, oldValue) {
            console.log('isHot被修改了', newValue, oldValue)
        }
    })
</script>

深度监视 | 适用与监视引用数据类型

1. Vue 中的 watch 默认不监测对象内部值的改变（一层）。
2. 配置 deep:true 可以监测对象内部值改变（多层），个人理解为监视引用数据类型
   备注：
3. Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以！
4. 使用 watch 时根据数据的具体结构，决定是否采用深度监视。

data:{
obj:{
a:0,
b:1
}
},
watch:{
// 监视多级结构中的某个属性
'obj.a':{
handler(newValue,oldVlaue){console.log(newValue,oldVlaue);
  }
  },
// 监视多级结构
obj:{
deep:true,//开启深度监视
handler(newValue,oldVlaue){console.log(newValue,oldVlaue);
}
}
}

watch | 监视属性的简写形式

watch:{
    // 当某个监视属性不需要配置项时，只需要响应者时触发语法糖，vm.$watch 也可以使用语法糖
    isHost(newValue,oldVlaue){
    console.log(newValue,oldVlaue);
    }
}