VUE数据双向绑定

1、Vue响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2、Vue监控对象属性变化的几种方式

例如要监控obj.name的变化

watch:{
    obj:{
        handler(newVal,oldVal){
            console.log('obj changed')
        },
        deep:true;
    },
}
这里是监控的整个obj对象

另外一种

watch:{
    'obj.name':{
        handler(newVal,oldVal){
            console.log('obj.name changed')
        }
    }
}
这里仅仅监控的是obj对象的name属性

还可以使用computed计算属性实现监控的效果

computed:{
    A(){
        return this.obj.name
    }
}

这里当依赖改变时会重新计算得到一个值返回

这里会想到watch与computer区别是：

        watch：不支持缓存；支持异步；一多对形式；

        computer：支持缓存；不支持异步（内有异步操