vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

有时候需要侦听某个对象具体的属性，可以按下面案例进行：

<template>
    <div>
        <input type="text" v-model="obj.two">
        <div>{{two}}</div>
    </div>
</template>

<script>
export default {
　　data:function(){
        return {
            obj: {
                one: 1,
                two: 2
    　　　　}
        }
    },
    computed: {
        two:function(){
            // 此时利用计算属性computed做中间层
            return this.obj.two
    　　}
    },
    watch:{
        two:function(newValue, oldValue){
            console.log(newValue)
        }
    }
}
</script>

分析：

　　1.data的时候，对其中的每个存在的值会进行深度遍历，创建dep

　　2.computed的时候会分析其中的值，然后把computed添加到了依赖值的dep通知队列里

　　3.这样每次this.obj.two变的时候就会通知two该执行了