浅谈Vue2.0响应式原理_简述 vue 2.0 响应式数据的原理

在Vue中，响应式是指数据与视图之间建立一种自动关联的关系，当数据发生变化时，视图会自动更新以反应数据的变化，无需开发者手动操作DOM元素更新视图。

响应式是实现数据驱动视图的基础，在Vue中，数据可以理解为状态state，视图就是用户直观看到的页面UI。页面会随着状态的改变而动态变化，因此可以得到以下公式：

UI = render(state)

上述公式中：状态state是输入，页面UI输出，状态输入一旦变化了，页面输出也随之而变化。这种特性就叫数据驱动视图。

公式可以进一步拆成三部分：state、render()以及UI。其中state和UI都是用户定的或开发者实现的，而不变的是render()函数。所以Vue就扮演了render()这个渲染的角色，当Vue检测到state变化之后，经过一系列加工，最终将变化响应式地反应在UI界面上。

实现数据的响应式需要解决以下三个问题：

1. 如何对状态state的变化进行监听？
2. 如何确定状态state改变之后要更新的视图？
3. 更新视图的时机是什么时候？

1. 状态state的变化监听

在Vue2中，数据监听是借助了javaScript提供的Object.defineProperty()函数实现的。

1. Object.defineProperty()

Object.defineProperty()静态方法用于在一个对象上定义一个新属性或修改该对象的现有属性。

Object.defineProperty(obj, prop, descriptor)
1

其中， descriptor表示要定义的属性描述符object，存在两种类型：数据描述符和访问器描述符。

注意： 描述符只能是这两种类型之一，且两者不能混合使用。

• 数据描述符是一个具有可写或不可写值的属性，对象支持四种键值:value、enumerable、writable、configurable

  const person = {}
  Object.defineProperty(person, 'age', {
    value: 18, // 定义属性值，默认undefined
    enumerable: true, // 属性可枚举， 默认false
    writable: true, // 属性值可修改， 默认false
    configurable: true, // 属性可删除，默认false
  })
  
  console.log(person.age) // > 18
  person.age = 19
  console.log(person.age) // > 19
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 访问器描述符是由 getter/setter 函数对描述的属性，支持四种键值：enumerable、configurable、get、set

  const person = {}
  let age = 18
  Object.defineProperty(person, 'age', {
    enumerable: true,
    configurable: true,
    get() {
      console.log(`有人读取了person的年龄,当前年龄${age}`)
      return age
    },
    set(value) {
      console.log(`有人修改的person的年龄，新的年龄是${value}`)
      age = value
    },
  })
  
  person.age
  person.age = 19
  age
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

输出结果：

2. Vue2.0中Object的变化监听

Vue2.0就是利用了Object.defineProperty方法中的访问器描述符来劫持数据的读写操作。在getter中捕获数据的读取事件，在setter中捕获数据的修改事件，进而对数据的变化进行监听。

对于Object类型的数据，Vue通过递归遍历的方式将数据中的每一个属性设置为getter/setter的形式，使对象的每一个属性都变得可观测