Vue响应式原理&Vue中数据的监听

Vue响应式原理理解以后就知道Vue是怎么对数据进行监听的，需要通过对 Observe、Dep、Watcher的理解来了解。

Observer理解如上图

Dep「依赖管理」

what? Dep就是帮我们收集【究竟要通知到哪里】，比如下面的案例。我们看到，data中有text和message属性，但是只有message被渲染到页面上，至于text无论怎么变化都影响不到视图的展示，因此我们仅仅对message进行收集即可，可以避免一些无用的工作。
那这个时候message的Dep就收集到了一个依赖，这个依赖就是用来管理data中message变化的。

<div>
    <p>{{message}}</p>
</div>

data: {
    text: 'hello world',
    message: 'hello vue',
}

当使用watch属性时，也就是开发者自定义的监听某个data中属性的变化。比如监听message的变化，message变化时我们就要通知到watch这个钩子，让它去执行回调函数。
**这个时候message的Dep就收集到了两个依赖，**第二个依赖就是用来管理watch中message变化的。

watch: {
    message: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
    },
}        

当开发者自定义computed计算属性时，如下messageT属性，是依赖message的变化的。因此message变化时我们也要通知到computed，让它去执行回调函数。
这个时候message的Dep就收集到了三个依赖，这个依赖就是用来管理computed中message变化的。

computed: {
    messageT() {
        return this.message + '!';
    }
}

Watcher理解如上图

总结：Vue响应式原理的核心就是Observer、Dep、Watcher。

1、Observer中进行响应式绑定，在数据被读的时候。触发get方法，执行Dep来手机依赖，也就是收集Watcher。
2、在数据被改的时候，触发set方法，通过对应的所有依赖(Watcher),去执行更新。比如watch和computed就执行开发者自定义的回调方法。

参考：https://juejin.cn/post/6844903858850758670#heading-3