框架图

基本原理：

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

基本原理总结：

vue实例创建->遍历data中属性->Object.defineProperty()方法->getter/setter->追踪相关依赖->属性被访问或修改->通知watcher->watcher重新计算->更新渲染关联组件