双向数据绑定原理

• 当你把一个javascript对象传入vue实例作为data选项,vue将遍历对象所有的property,并使用Object.defineProperty把这些peoperty全部转为getter/setter
• getter/setter对用户来说是不可见的,但是在内部它们让vue能够追踪依赖,在property被访问和修改时通知变更,这里需要注意的是不同浏览器在控制台打印数据对象时对getter/setter的格式化并不同,所以建议安装vue-devtools来获取检查数据更加友好的用户界面
• 每个组件实例都对应一个watcher实例,她会在组件渲染的过程中把接触过的数据property记录为依赖,之后当依赖项的setter触发时,会通知watcher,从而使它关联的组件重新渲染
• data--->getter/setter--->数据改变--->notify--->watcher--->trigger/re-render--->componnetRender()--->render--->vm tree