手写实现简易版vue的响应式原理(data, watch, computed)

给实习生们布置了这个作业，此处作个记录。
代码方面只实现基本的思想，并不是和vue源码一模一样的结构，为的是更好的理解响应式原理

实现范围：

  1. data：data内所有属性都绑好的get、set方法，有多层的话，递归完成多层
  2. watch：data任一个属性改变都会触发对应watch的监听函数
  3. computed：computed内的属性的data属性依赖改变后，computed的属性值会重新获取，否则读取缓存

目录结构：

  1. 实现的源代码
  2. 测试用例

实现的源代码

目录结构

  1. ├── index.html
  2. └── vue2
  3.     └── index.js

./index.html（使用效果）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <script src="./vue2/index.js"></script>
  7. </head>
  8. <body>
  9. 打开控制台
  10. <script>
  11.   window.vm = new Vue2({
  12.     el: '#app',
  13.     data: {
  14.       x: 1,
  15.       y: 2,
  16.       z: 3,
  17.       a: {
  18.         b: 4,
  19.         c: 5
  20.       }
  21.     },
  22.     watch: {
  23.       x (newVal, oldVal) {
  24.         console.log('我是watch的回调函数', newVal, oldVal)
  25.       }
  26.     },
  27.     computed: {
  28.       C_x () {
  29.         console.log('我是computed的回调函数')
  30.         return this.x
  31.       }
  32.     }
  33.   })
  34. </script>
  35. </body>
  36. </html>

./vue2/index.js （实现细节，请看注释）

  1. function Vue2(options) {
  2.   this.$options = options
  4.   initWatch.call(this, options.watch)
  5.   initComputed.call(this, options.computed)
  6.   initData.call(this, options.data)
  7. }
  9. function initWatch (data) {
  10.   this.watcherList = data
  11.   this.val = null
  12. }
  14. function initComputed (data) {
  15.   this._computedWatchers = {} // 保存computed对应key的缓存
  16.   this._computedAndDataMap = {} // 保存computed对应key 和其回调函数内的 this.xxdata 的映射关系 (如果this.xxdata变更了, 清空对应的this._computedWatchers的缓存)
  17.   this._currentComputedKey = null // 保存computed对应key. 为了上面this._computedAndDataMap能拿到依赖关系
  19.   Object.keys(data).forEach(key => {
  20.     Object.defineProperty(this, key, {
  21.       configurable: true,
  22.       enumerable: true,
  23.       get: function() {
  24.         this._currentComputedKey = key
  25.         if (!this._computedWatchers[key]) this._computedWatchers[key] = data[key].call(this)
  26.         this._currentComputedKey = null
  27.         return this._computedWatchers[key]
  28.       },
  29.       set: function (n) {
  30.         console.log('computed值不能修改')
  31.       }
  32.     })
  33.   })
  34. }
  36. function initData (data) {
  37.   for (let key in data){
  38.     let temp; // 利用了闭包, 保存了私有的变量 方便get和set的操作, 会常驻内存
  39.     // 如果 data[key] 是一个对象, 递归重写 setter getter
  40.     if(typeof data[key] === 'object'){
  41.       temp = new Object()
  42.       initData.call(temp, data[key]) // 递归 用Object.defineProperty监听data
  43.     } else {
  44.       temp = data[key]
  45.     }
  47.     // 将 data 中的数据直接绑定在 vue 的实例上, 好处是可以 this.x 调用数据了.
  48.     Object.defineProperty(this, key, {
  49.       configurable: true,
  50.       enumerable: true,
  51.       get: function() {
  52.         console.log(key, '的get函数被执行了')
  53.         if (this._currentComputedKey) { // 如果是computed内的回调函数像拿值, 做一个记录, 记录下当前key 对应哪个computed内的属性
  54.           this._computedAndDataMap[key] = this._currentComputedKey
  55.         }
  56.         return temp
  57.       },
  58.       set: function (n) {
  59.         console.log(key, '的----set-----函数被执行了')
  60.         const watcher = this.watcherList[key] // 如果被watch监听了, 执行watch内的回调函数
  61.         if (watcher) {
  62.           watcher(n, this.val) // newVal 和 oldVal
  63.         }
  64.         temp = n
  65.         this._computedWatchers[this._computedAndDataMap[key]] = null // 因为这个依赖改变了, computed对应的值也要刷新
  66.         this.val = n // 保存当前val, 后面会变成oldVal
  67.       }
  68.     })
  69.   }
  70. }

测试用例

以下是测试用例 和 细节解释： 可以亲手试试一条一条在控制台输出

  1. /* 以下是测试用例 和 细节解释： 可以亲手试试一条一条在控制台输出*/
  2. console.log(vm.x) // 会触发this.x的get监听函数
  3. console.log(vm.a.b) // 会触发this.a的get监听函数 和 this.a.b的get监听函数
  4. /* computed的属性C_x是一个函数的返回值, 需缓存这个返回值, 并且收集依赖this.x,
  5.    当this.x改变时, 需要重新跑函数 获得返回值
  6.    跑函数的过程中, 需获取this.x, 会触发this.x的get监听函数 */
  7. console.log(vm.C_x)
  8. console.log(vm.C_x) // computed的属性C_x已经有缓存了, 直接返回缓存, 不会去取this.x的值了, 不会触发this.x的get监听函数
  9. vm.x = 1111 // 会触发watch, 清掉C_x的缓存
  10. vm.x = 22222222 // 会触发watch, 清掉C_x的缓存
  11. console.log(vm.C_x) // computed的属性C_x需重新获取函数的返回值, 会重新触发this.x的  get监听函数
  12. console.log(vm.C_x) // computed的属性C_x已经有缓存了, 直接返回缓存, 不会去取this.x的值了, 不会触发this.x的get监听函数

vue-log.png

点赞一将，手留余香~