vue 的响应式原理浅谈

对学习到的 vue 的响应式原理做了一些简单的总结，还需继续学习

vue 的响应式原理就是数据劫持 + 发布者订阅者模式

创建一个 vue 的时候，最开始是从 new Vue 开始执行，在 new Vue 里面有 el 挂载实例对象和 data 响应式数据。当创建好 vue 实例之后，他会在整个响应式流程里面，走不同的流程。如下图，vue 实例中的 el 会走下面的流程，data 会走上面的流程，下面是 vue2 的一个响应式原理的流程， vue3 的响应式主要是基于 ES6 的新特性 Proxy 实现

首先 data 数据的流程，会被传入到 Observer(观察者) 观察者对象中，在观察者对象里面，将所有的 data 数据，都用 Obejct.defineProperty 来做一个监听，监听 Obejct.defineProperty 里面的 set 和 get。这是整个 Observer 里面的核心。

然后 el 模板的流程，会将挂载的 el 传入 Compile 中进行解析，页面中，一般使用的是 {{}} mustache 语法来展示 data。当每解析一个 mustache 的时候，就会创建一个 watcher 对象，创建好的 watcher 对象就会添加进 Observer 对象中的 Dep 中的 subs 里面。

解析完所有的 el 模板之后，就会将解析完的内容显示在页面上。

当 data 中的内容发生改变的时候，Observer 监听到数据发生了改变，就会去遍历对应数据的 Dep 对象中 subs 数组中的 watcher，找到对应的数据改变后，会调用该 watcher 中的 update 方法，然后去更新 view 视图，在页面中渲染出新的数据。