读懂数据vue响应式和双向绑定原理

数据响应和双向绑定vue中有不同的概念

1. 数据响应

数据响应的作用是： 数据驱动的视图

1.1 数据响应

Vue采用的是 数据劫持与发布和-订户模式 通过拦截数据的操作，当数据发生变化时。
消息被分发给订阅者，触发相应的监听回调。

1.2 数据劫持原理

vue2和vue3数据劫持的原理是不同的。

1.2.1 vue2数据劫持

vue2通过 Object.defineProperty 对 data 上的数据 getter和setter 操作，定义对象的新属性，或修改对象的现有属性并返回该对象。也就是说，属性的读取和修改被拦截(数据劫持)

1.2.2 vue3数据劫持

vue3通过 Proxy 对象为对象创建代理，以拦截和定制基本操作(如属性查找、赋值、枚举、函数调用等)。 Proxy 倾听是深入的，倾听的是整个对象，而不是一个属性。

1.3 发布者-订户模式

简单地说，出版商-订户模式的流程就是， 监听器 监听数据状态更改, 一旦数据更改，相应的 订阅者 ，让订阅者执行相应的业务逻辑。 。

我们熟悉的事件机制是典型的发布。-订阅模式。

首先，数据应该被劫持和监控，所以我们需要建立一个。 监听器Observer ，用于侦听所有属性。如果属性发生变化，您需要告知。 订阅者Watcher 查看是否需要更新。因为 订阅者 有很多，所以我们需要一个。 消息订阅者Dep 专门收集这些订户，然后进入。 监听器Observer 和 订阅者Watcher 统一管理。然后，我们还需要有一个 指令解析器Compile ，扫描并解析每个节点元素，并将相关指令初始化为一个 订阅者Watcher 并替换模板数据或绑定相应的函数。 订阅者Watcher 当您收到相应属性的更改时，您将执行相应的更新功能来更新视图。

• 监听器Observer ，用于监听数据源中的更改.
• 消息订阅者Dep ，因为监听者和订阅者是 一对多 的关系,所以这是一个设计的管理中心。,管理侦听器与其对应的订阅者之间的关系。, 消息调度和依赖关系管理依赖于它。
• 订阅者Watcher ，当监听器监听数据变更时，该变更通过消息调度中心，最终传递给该监听器对应的所有订阅者，然后这些订阅者可以分别执行各自的业务回调

2. 双向绑定

双向绑定的作用是： 数据和视图相互推动更新，并且是相互关系。

2.1 v-model属性

vue大体上通过 v-model 反映双向绑定。

v-model 实际上是 v-on 和 v-bind 语法糖。

针对于 input 的 v-model 双向数据绑定实际上是通过子组件实现的。 $emit 方法派发 input 事件时，父组件将侦听 input 在事件中传递并存储在父组件中的值。 data 然后传递父组件。 prop 表单被传递给子组件。,子组件中的绑定 input 的 value 属性。

其他元素使用 v-model 双向数据绑定实际上是通过监听实现的。 change 事件。和 $emit 方法分配，然后通过。 prop 形式传递。

2.2 sync修饰符

父组件可以通过多种方式将数据传递给子组件， props 是其中之一，但由于 单向数据流 不能直接修改子组件。 prop 属性

父组件中没有定义 update 事件，但可以完成 prop 属性 page 修改后的版本，即 sync 语法糖的作用。

总结

数据响应和双向绑定的主要区别在于

• 数据响应是 数据驱动的视图更新
• 双向绑定是 数据和视图相互驱动，相互更新。