Vue中的数据监听（响应式）

一，数组和对象的深度监听

处理方法

数据测试

    1，Object.defineProperty缺点

        1）深度监听，需要递归到底，一次性计算量大

        2）无法监听新增属性/删除属性(Vue.set，Vue.delete）

        3）无法原生监听数组，需要特殊处理

    2，数组监听：就是重写了数组的原型，更准确的表达是拦截了数组的原型，然后用Object.defineProperty劫持数组方法

    2，vue3.0，Object.defineProperty的替代方案是proxy（不能兼容ie11）、

二，响应式的核心原理

    1，Observer

        将data中的数据用Object.defineProperty进行数据劫持，每个目标对象的键值（即data中的数据）转换成getter/setter形式，用于进行依赖收集和通过依赖通知更新

    2，Dep（依赖管理）

        1）什么是依赖？

            数据响应式后，如何通知视图更新？Dep就是帮我们收集【究竟要通知到哪里的】

        2）如何收集依赖

            我们如何知道data中的某个属性被使用了，答案就是Object.defineProperty，因为读取某个属性就会触发get方法

        3）Dep就是收集与视图相关的数据，触发了get的数据，主要起到依赖收集和通知更新的作用。用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.notify()通知各个 watcher。

        4）initState 时,对 computed 属性初始化时,触发 computed watcher 依赖收集

        5）initState 时,对侦听属性初始化时,触发 user watcher 依赖收集

        6）render()的过程,触发 render watcher 依赖收集

        7）re-render 时,vm.render()再次执行,会移除所有 subs 中的 watcer 的订阅,重新赋值。

    3，Watcher

        1）Watcher就是类似中介的角色，比如message就有三个中介，当message变化，就通知这三个中介，他们就去执行各自需要做的变化。

        2）Watcher必须要有的2个方法。一个就是通知变化，另一个就是被收集起来到Dep中去。

        3）遍历所有的 subs（Watcher 实例）,调用每一个 watcher 的 update 方法。

    4，Watcher 和 Dep 的关系

        watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新。

三，总结

    1，在数据被改的时候，触发set方法，通过对应的所有依赖(Watcher)，去执行更新。比如watch和computed就执行开发者自定义的回调方法。

    2，Observer中进行响应式的绑定，在数据被读的时候，触发get方法，执行Dep来收集依赖，也就是收集Watcher。