深入浅出Vue系列--数据劫持实现原理-创新互联

一、前言

数据双向绑定作为 Vue 核心功能之一，其实现原理主要分为两部分：

1. 数据劫持
2. 发布订阅模式

本篇文章主要介绍 Vue 实现数据劫持的思路，下一篇则会介绍发布订阅模式的设计。

二、针对 Object 类型的劫持

对于 Object 类型，主要劫持其属性的读取与设置操作。在 JavaScript 中对象的属性主要由一个字符串类型的“名称”以及一个“属性描述符”组成，属性描述符包括以下选项：

1. value： 该属性的值；
2. writable： 仅当值为 true 时表示该属性可以被改变；
3. get： getter （读取器）；
4. set： setter （设置器）；
5. configurable： 仅当值为 true 时，该属性可以被删除以及属性描述符可以被改变；
6. enumerable： 仅当值为 true 时，该属性可以被枚举。

上述 setter 和 getter 方法就是供开发者自定义属性的读取与设置操作，而设置对象属性的描述符则少不了 Object.defineProperty() 方法：

function defineReactive (obj, key) {
 let val = obj[key]
 Object.defineProperty(obj, key, {
  get () {
   console.log(' === 收集依赖 === ')
   console.log(' 当前值为：' + val)
   return val
  },
  set (newValue) {
   console.log(' === 通知变更 === ')
   console.log(' 当前值为：' + newValue)
   val = newValue
  }
 })
}

const student = {
 name: 'xiaoming'
}

defineReactive(student, 'name') // 劫持 name 属性的读取和设置操作