vue 响应式原理

响应式和双向绑定区别

响应式一般指：数据改变驱动视图改变，是单向的.

双向绑定：是双向的，视图反过来也可以改变数据。 也就是说响应式是双向绑定的一环.

响应式简介

数据驱动视图更改需要具备两个条件：

1. 知道什么时候数据更改 -监听数据改变

2. 数据改变后将更改更新到视图

监听数据改变

1. 手动触发视图更新（setData） 对应 react
2. 数据劫持 对应 vue
3. 脏检查 对应 angular

如何更新到视图

通过发布订阅模式，监听到数据变化之后，get 时收集依赖，set 的时候通知更新视图。

原理图

响应式源码解析

1. observe 函数: 是用来监测数据的变化，是一个入口函数，并提供一个出口。

2. Observer 类: 实例化的过程中对实例添加__ob__属性，并遍历 data

3. defineReactive 函数: 直接实现将数据转换为响应化的函数

顺序是 1 => 2 => 3 => 1 ... 间接递归的出口在 1 当传入的值不是对象时。

参考：Vue 的 MVVM 模式响应式原理https://juejin.cn/post/6922855909546786830 (opens new window)

observe 解析

1. 判断必须是对象和非 VNode 的对象类型

2. 判断是否被观察 __ob__，__ob__属性，表示这个数据被观察了。

3. 给数组或对象 实例化一个 Observer 对象实例

Observer 解析

1. 给 data 数据添加__ob__