Vue 响应式数据绑定原理

Vue 响应式数据绑定原理

Vue 是一款流行的前端框架，其最大的特点就是响应式的数据绑定。本文将简单介绍 Vue 的响应式数据绑定原理。

Vue 的响应式数据绑定原理是通过 Object.defineProperty 实现的。在 Vue 实例化时，Vue 会通过 walk 函数将 data 对象的每个属性转换成 getter 和 setter 函数。当属性被读取或设置时，就会执行对应的 getter 和 setter 函数，从而实现响应式数据绑定。

function walk(obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i< keys.length; i++) {
    defineReactive(obj, keys[i])
  }
}

function defineReactive(obj, key, val) {
  if (arguments.length === 2) {
    val = obj[key]
  }

  if (typeof val === 'object') {
    walk(val)
  }

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log(`Get value of ${key}:${val}`)
      return val
    },
    set: function reactiveSetter(newVal) {
      console.log(`Set value of ${key}:${newVal}`)
      val = newVal
    }
  })
}

const data = {
  name: 'Vue',
  version: 3,
  author: {
    name: 'Evan You',
    age: 31
  }
}

walk(data)

data.name
// Output: Get value of name:Vue
//        "Vue"

data.version = 4
// Output: Set value of version:4

data.author.age
// Output: Get value of author:{"name":"Evan You","age":31}
//        Get value of age:31
//        31

当数据发生变化时，会触发 setter 函数的执行，从而执行对应的更新函数，将页面中的数据更新成最新的值。

以上就是 Vue 响应式数据绑定原理的简单介绍。通过 Object.defineProperty 实现 getter 和 setter 函数，实现数据的响应式绑定。