image.png

前言

Vue 最显著的一个特点就是数据响应式，通过改变 Model（JavaScript 对象） 中数据的值，可以自动触发相应试图的更新。这也是 MVVM 框架的好处。

那如何实现数据响应式呢？

在 vue2.0 时，尤大使用了 ES5 Object.defineProperty 方法实现。

Object.defineProperty

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

就是说使用了 **Object.defineProperty()**方法，允许添加和修改该对象的属性，这些属性的值可以被改变，也可以被删除。

  1. // 使用方法
  2. Object.defineProperty(obj, prop, description)
  4. // obj: 要在其上定义属性的对象
  6. // prop: 要定义或者修改的属性的名称
  8. // description: 将被定义或者修改的属性描述符
  9. // 属性描述符（数据描述符和存取描述符（get、set））

响应式代码实现

基础版（对象只有一层属性）

  1. // 数据响应式
  2. // 更新试图方法
  3. function updateView () {
  4.     console.log('试图更新')
  5. }
  7. function observer (target) {
  8.     // 如果不是对象，则返回
  9.   if (typeof target !== 'object' || target === null) {
  10.       return target
  11.   }
  13.   // 遍历对象枚举
  14.   for (let key in target) {
  15.       // 重新定义属性
  16.     defineProperty(target, key, target[key])
  17.   }
  18. }
  20. // 重新定义属性
  21. function defineProperty (target, key, value) {
  22.     Object.defineProperty(target, key, {
  23.       get () {
  24.         return value
  25.     },
  26.     set (newValue) {
  27.         if (newValue !== value) {
  28.                 updateView()
  29.         value = newValue
  30.       }
  31.     }
  32.   })
  33. }
  35. // 定义对象
  36. let data = {
  37.     name: 'zhoujiawei'
  38. }
  40. // 添加侦听器
  41. observer(data)
  43. // 改变属性值
  44. data.name = 'new allen'
  46. console.log(data.name) // new allen

image.png

对象属性多层嵌套

比如 data = { ``name: 'zhoujiawei', msg: { age: 12 }``}

  1. // 数据响应式
  2. // 更新试图方法
  3. function updateView () {
  4.     console.log('试图更新')
  5. }
  7. function observer (target) {
  8.     // 如果不是对象，则返回
  9.   if (typeof target !== 'object' || target === null) {
  10.       return target
  11.   }
  13.   // 遍历对象枚举
  14.   for (let key in target) {
  15.       // 重新定义属性
  16.     defineProperty(target, key, target[key])
  17.   }
  18. }
  20. // 重新定义属性
  21. function defineProperty (target, key, value) {
  22.   // ************ 递归遍历 *************
  23.   observer(value)
  24.   // *********************************
  25.     Object.defineProperty(target, key, {
  26.       get () {
  27.         return value
  28.     },
  29.     set (newValue) {
  30.         if (newValue !== value) {
  31.                 updateView()
  32.         value = newValue
  33.       }
  34.     }
  35.   })
  36. }
  38. // 定义对象
  39. let data = {
  40.     name: 'zhoujiawei',
  41.   msg: {
  42.         age: 12
  43.     }
  44. }
  46. // 添加侦听器
  47. observer(data)
  49. // 改变属性值
  50. // data.name = 'new allen'
  51. data.msg.age = 13
  53. console.log(data.msg.age) // 14

image.png

属性特殊赋值操作

❌错误代码

  1. // 数据响应式
  2. // 更新试图方法
  3. function updateView () {
  4.     console.log('试图更新')
  5. }
  7. function observer (target) {
  8.     // 如果不是对象，则返回
  9.   if (typeof target !== 'object' || target === null) {
  10.       return target
  11.   }
  13.   // 遍历对象枚举
  14.   for (let key in target) {
  15.       // 重新定义属性
  16.     defineProperty(target, key, target[key])
  17.   }
  18. }
  20. // 重新定义属性
  21. function defineProperty (target, key, value) {
  22.   // ************ 递归遍历 *************
  23.   observer(value)
  24.   // *********************************
  25.     Object.defineProperty(target, key, {
  26.       get () {
  27.         return value
  28.     },
  29.     set (newValue) {
  30.         if (newValue !== value) {
  31.                 updateView()
  32.         value = newValue
  33.       }
  34.     }
  35.   })
  36. }
  38. // 定义对象
  39. let data = {
  40.     name: 'zhoujiawei',
  41.   msg: {
  42.         age: 12
  43.     }
  44. }
  46. // 添加侦听器
  47. observer(data)
  49. // *********** 改变属性值 ***********
  50. data.msg = {
  51.     sex: 'man'
  52. }
  53. data.msg.sex = 'woman'
  54. // ********************************
  56. console.log(data.msg.sex) // man（这边应该是 woman 才是对的，但实际是 man）

这时候需要在 set 中添加 observer 方法。

  1.     Object.defineProperty(target, key, {
  2.       get () {
  3.         return value
  4.     },
  5.     set (newValue) {
  6.         if (newValue !== value) {
  7.         // *********************
  8.         observer(newValue)
  9.         // *********************
  10.                 updateView()
  11.         value = newValue
  12.       }
  13.     }
  14.   })

image.png

改变数组

我们知道在 Vue2.0 中，改变数组比如：myArray[2] = 2。给数组 myArray 添加一个值是不会触发视图更新的。但是使用一些能改变原数组的数组对象方法，则可以更新视图。

列举一下：push、pop、shift、unshift、reverse、sort、splice

Vue2.0 中通过对这几个数组方法的重写，进行函数劫持，在调用原函数之前，触发视图更新。

  1. // 数据响应式
  2. let ArrayProperty = Array.prototype; // Array的原型
  3. let proto = Object.create(ArrayProperty) // 继承
  5. ;['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'].forEach((method) => {
  6.   proto[method] = function () {
  7.     // 更新视图
  8.     updateView()
  9.     ArrayProperty[method].call(this, ...arguments)
  10.   }
  11. })
  13. // 更新试图方法
  14. function updateView () {
  15.     console.log('试图更新')
  16. }
  18. function observer (target) {
  19.     // 如果不是对象，则返回
  20.   if (typeof target !== 'object' || target === null) {
  21.       return target
  22.   }
  24.   if (Array.isArray(target)) {
  25.       // 如果是数组，将 target 的链指向 proto
  26.     target.__proto__ = proto
  27.   }
  29.   // 遍历对象枚举
  30.   for (let key in target) {
  31.       // 重新定义属性
  32.     defineProperty(target, key, target[key])
  33.   }
  34. }
  36. // 重新定义属性
  37. function defineProperty (target, key, value) {
  38.   // ************ 递归遍历 *************
  39.   // 考虑对象属性多层嵌套
  40.   observer(value)
  41.   // *********************************
  42.     Object.defineProperty(target, key, {
  43.       get () {
  44.         return value
  45.     },
  46.     set (newValue) {
  47.         if (newValue !== value) {
  48.         // 考虑属性特殊赋值操作
  49.         observer(newValue)
  50.                 updateView()
  51.         value = newValue
  52.       }
  53.     }
  54.   })
  55. }
  57. // 定义对象
  58. let data = {
  59.     name: 'zhoujiawei',
  60.   msg: {
  61.         age: 12
  62.     }
  63. }
  65. // 添加侦听器
  66. observer(data)
  68. // *********** 改变属性值 ***********
  69. data.msg = {
  70.     sex: 'man',
  71.   log: [1, 2, 3]
  72. } // 更新第一次
  74. data.msg.log.push(4) // 更新第二次
  75. // ********************************

image.png

完整代码

  1. // 数据响应式
  2. let ArrayProperty = Array.prototype; // Array的原型
  3. let proto = Object.create(ArrayProperty) // 继承
  5. ;['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'].forEach((method) => {
  6.   proto[method] = function () {
  7.     // 更新视图
  8.     updateView()
  9.     ArrayProperty[method].call(this, ...arguments)
  10.   }
  11. })
  13. // 更新试图方法
  14. function updateView () {
  15.     console.log('试图更新')
  16. }
  18. function observer (target) {
  19.     // 如果不是对象，则返回
  20.   if (typeof target !== 'object' || target === null) {
  21.       return target
  22.   }
  24.   if (Array.isArray(target)) {
  25.       // 如果是数组，将 target 的链指向 proto
  26.     target.__proto__ = proto
  27.   }
  29.   // 遍历对象枚举
  30.   for (let key in target) {
  31.       // 重新定义属性
  32.     defineProperty(target, key, target[key])
  33.   }
  34. }
  36. // 重新定义属性
  37. function defineProperty (target, key, value) {
  38.   // ************ 递归遍历 *************
  39.   // 考虑对象属性多层嵌套
  40.   observer(value)
  41.   // *********************************
  42.     Object.defineProperty(target, key, {
  43.       get () {
  44.         return value
  45.     },
  46.     set (newValue) {
  47.         if (newValue !== value) {
  48.         // 考虑属性特殊赋值操作
  49.         observer(newValue)
  50.                 updateView()
  51.         value = newValue
  52.       }
  53.     }
  54.   })
  55. }
  57. // 定义对象
  58. let data = {
  59.     name: 'zhoujiawei',
  60.   msg: {
  61.         age: 12
  62.     }
  63. }
  65. // 添加侦听器
  66. observer(data)
  68. // *********** 改变属性值 ***********
  69. data.msg = {
  70.     sex: 'man',
  71.   log: [1, 2, 3]
  72. } // 更新第一次
  74. data.msg.log.push(4) // 更新第二次
  75. // ********************************

Vue2.0 响应式缺点

  1. Vue 实例化后新增的属性，不会被监听。但可以使用 Vue.set(data, 'a', 1) 设置新属性（对象不存在的属性不能被拦截）。
  2. Object.defineProperty的一个缺陷是无法监听数组变化（数组的7个改变原数组本身能被监听）。同样可以使用 Vue.set 来设置数组项。
  3. 默认递归，有性能问题。

注：Vue3.0 将会使用 Proxy 来实现数据绑定响应式，将解决上述的缺点。