Vue 双向数据绑定原理图（简易）

2024-02-22 10:20:59

Vue 双向数据绑定原理图（简易）

                                                                        
┌──────────────────────────────────────────────┐                                   
│                                                  │                                   
│              ┌──────────┐                      │                                   
│              │  Vue 实例 │                      │                                   
│              └──────────┘                      │                                   
│                                                  │                                   
└──────────────────────────────────────────────┘                                   
                                                                        
               ┌─────────────┐                                         
               │  Data Object │                                         
               └─────────────┘                                         
                  /           \                                         
                 /             \                                        
         ┌──────────┐   ┌──────────┐                                   
         │ Watcher 01 │   │ Watcher 02 │                                   
         └──────────┘   └──────────┘                                   
               /               \                                        
              /                 \                                       
      ┌────────────────┐   ┌────────────────┐                         
      │  Compile Function │   │  Compile Function │                         
      └────────────────┘   └────────────────┘                         
                  /           \                                         
                 /             \                                        
         ┌──────────┐   ┌──────────┐                                   
         │  Dep 01 │   │  Dep 02 │                                   
         └──────────┘   └──────────┘                                   
                   \           /                                         
                  \           /                                          
┌──────────────────────────────────────────────┐                         
│                                                  │                         
│                                                  │                         
│                                                  │                         
└──────────────────────────────────────────────┘

核心概念

数据劫持

数据劫持是 Vue 双向数据绑定的核心技术之一。它通过 Object.defineProperty() 方法，将数据对象的每个属性都劫持为一个 getter 和一个 setter。当数据对象的属性被访问时，getter 会被调用；当数据对象的属性被修改时，setter 会被调用。

发布订阅者模式

发布订阅者模式是 Vue 双向数据绑定的另一个核心技术。它通过 Dep 和 Watcher 对象来实现。Dep 对象负责管理数据对象的属性的订阅者，Watcher 对象负责监听数据对象的属性的变化。当数据对象的属性发生变化时，Dep 对象会通知所有订阅它的 Watcher 对象，从而触发 Watcher 对象的回调函数，更新视图。

Object.defineProperty

Object.defineProperty() 方法是 JavaScript 中的一个内置方法，它允许我们对数据对象的属性进行劫持。我们可以使用 Object.defineProperty() 方法为数据对象的每个属性设置 getter 和 setter 函数，从而在访问和修改数据对象的属性时执行自定义操作。

Dep

Dep 对象是 Vue 双向数据绑定的一个核心对象。它负责管理数据对象的属性的订阅者。当数据对象的属性被访问时，Dep 对象会将该属性的 Watcher 对象添加到自己的订阅者列表中。当数据对象的属性发生变化时，Dep 对象会通知所有订阅它的 Watcher 对象，从而触发 Watcher 对象的回调函数，更新视图。

Watcher

Watcher 对象是 Vue 双向数据绑定的另一个核心对象。它负责监听数据对象的属性的变化。当数据对象的属性被访问时，Watcher 对象会将自己添加到该属性的 Dep 对象的订阅者列表中。当数据对象的属性发生变化时，Dep 对象会通知所有订阅它的 Watcher 对象，从而触发 Watcher 对象的回调函数，更新视图。