第39题：Vue的双向绑定原理？

[akai2524]

new vue( ) 首先执行初始化，对data执行响应化处理，observer开始监听所有数据的属性，这步发生在（observer中） 同时compile对模板进行编译，找到动态绑定的数据，在data中获取数据并且初始化视图，这步在（compile中） 同时定义一个更新函数一个watcher函数，当数据发生变化时，watcher函数调用更新函数处理 data中的某个key，可能在页面上使用多次，所以每个key都需要一个管家Dep来管理所有的watcher 当数据发生变化时，首先找到其对应的Dep，Dep通知所有的watcher执行更新函数

[AckermanCC]

通过v-mode实现数据的双向绑定--> v-model等价于 -- 父组件--> :value="xx" @input="$event" 子组件-->props: { value: { type: xx, default: xx } } 接收 this.$emit('input', 参数)

[zicuan123]

在创建一个vue实例时，vue会遍历data选项的属性，用Object.defineProperty将它们转化为getter/setter，并在内部追踪相关依赖，在属性被访问拒绝和修改时通知变化。 每个组件实例都有对应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，通知watcher重新计算，从而致使与它关联的组件得以更新