Vue.js的响应式原理

Vue.js的响应式原理

Vue.js 是一个 MVVM 框架,实现了数据的双向绑定。Vue 通过数据劫持和观察者模式,实现数据的响应式更新。当数据发生变化时,Vue 会触发DOM 更新,达到双向绑定的效果。

数据劫持observer

Vue 利用 Object.defineProperty() 劫持 data 中的属性,当这些属性修改时可以触发对应的更新。

var data = { name: 'John' }
observe(data)

function observe(obj) {
  if (!obj || typeof obj !== 'object') return
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      // ...
    },
    set: function(newVal) {
      console.log(`属性 ${key} 已更新,新值为:`, newVal)
    }
  })
}

上面代码在data对象上定义了name属性的getter和setter,在name属性修改时会触发setter函数,实现对属性修改的监听。

Vue 无法检测对象的添加和删除属性。我们可以使用Vue.set(object, key, value)方法添加属性,或者this.$set(object, key, value)方法。

观察者模式

Vue 利用观察者模式,实现数据更新后的DOM渲染。每个组件实例对应一个观察者watcher,在数据更新时会通知watcher重新渲染。这里是观察者模式的实现:

class Watcher {
  constructor(vm, exprOrFn, callback) {
    this.vm = vm   
    // 保存旧值,用于对比非深层监听
    this.oldValue = this.getOldValue() 
  }

  getOldValue() {
    Dep.target = this
    let oldValue = compileUtil.getVal(this.expr, this.vm)
    Dep.target = null
    return oldValue
  }

  update() {
    let newValue = compileUtil.getVal(this.expr, this.vm)
    if (newValue !== this.oldValue) {
      this.callback(newValue)
      this.oldValue = newValue
    }
  }
}

compileUtil.getVal()会触发getter函数,添加watcher到属性的订阅器dep中。属性更新时,会调用watcher的update()方法重新渲染。

模板编译

Vue 在实例化时会编译模板,解析指令和插值表达式,并用更新函数替换它们。

<p>{{ msg }}</p>

编译结果:

<p>_s(msg)</p>

_s()会作为更新函数,在数据变化重新渲染页面。

所以输入框的v-model和双大括号,本质上添加的都是数据更新所对应的更新函数,从而实现了双向绑定。

总结

Vue 的响应式原理主要通过:

Object.defineProperty()劫持data属性的getter/setter
观察者模式:属性变化触发setter,通知订阅者watcher更新
模板编译:解析指令和插值,绑定更新函数
virtual DOM更新真实DOM
Vue3则使用Proxy替代defineProperty,以更好地支持对象的响应式。