Vue2响应式原理解析和实现

核心原理

Vue通过 Object.defineProperty 的 getter/setter 对收集的依赖项进行监听，在属性被访问和修改时通知变化，进而更新视图数据。

• 监听器 Observer ，用来劫持并监听所有属性，如果属性发生变化，就通知订阅者；
• 订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理；
• 订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图；

Object.defineProperty

Object.defineProperty

**Object.defineProperty()** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

• obj

  要定义属性的对象。

• prop

  要定义或修改的属性的名称或 Symbol 。

• descriptor

  要定义或修改的属性描述符。

// 响应式函数
function defineReactive(obj, key, val) {
   
    Object.defineProperty(obj, key, {
   
        get() {
   
            console.log(`访问了${
     key}属性`)
            return val
        },
        set(newValue) {
   
            console.log(`将${
     key}由->${
     val}->设置成->${
     newValue}`)
            if (val == newValue) {
   
                return;
            }
            val = newValue
        }
    })
}


const data = {
   
    name: 'Tom',
    age: 3
}

const observe = function(data) {
   
    for (let key in data) {
   
        defineReactive(data, key, data[key])
    };
}

observe(data);

console.log(data.name)
// 访问了name属性
// Tom
data.name = 'Jerry' //