前言

在上一篇《Vue2.0 如何实现数据响应式》中我们知道，Vue2.0 是通过 ES5 Object.defineProperty 来实现响应式的。但是也正是因为使用了这个方法，所以在 Vue2.0 的数据响应式中存在着缺陷：

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

这一篇，我们将来看一下新的 Vue3.0 是如何利用 ES6 Proxy 来重写实现的。

实践

在开始之前，先把 vue-next 源码克隆到本地，执行 npm run dev，生成 vue 包。

image.png
在 dist 目录下新建一个 index.html，尝试写一下 3.0 语法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <div id="container"></div>
  10.   <script src="./vue.global.js"></script>
  11.   <script>
  12.     const App = {
  13.       // created 只会执行一次
  14.       // Vue.reactive() 返回一个 Proxy
  15.       setup () {
  16.         let state = Vue.reactive({
  17.           name: 'zhuojiawei'
  18.         })
  19.         // 更新数据
  20.         function changeName () {
  21.           state.name = 'allen'
  22.         }
  23.         // data
  24.         return {
  25.           state,
  26.           changeName
  27.         }
  28.       },
  29.       template: `<div @click="changeName">{{state.name}}</div>`
  30.     }
  31.     // 创建应用
  32.     // App 对象
  33.     // 父容器
  34.     Vue.createApp().mount(App, container)
  35.   </script>
  36. </body>
  37. </html

我们打印一下 state，看到 state 返回的是一个 Proxy 。
image.png

这里，就引出了 Vue3.0 的实现数据响应式的核心就是 ES6 Proxy（代理），Proxy 的具体用法可以参考 Proxy。
**

响应式代码实现

基础版（对象只有一层）

  1. // vue2.0 缺点:
  2. // 1. 默认递归，性能问题
  3. // 2. 数组改变长度无效
  4. // 3. 对象不存在的属性，不会被拦截
  5. // ***************************************************
  6. // vue3.0 响应式原理
  7. // 判断是不是对象
  8. function isObject (val) {
  9.   return typeof val === 'object' && val !== null
  10. }
  12. // 响应式的核心方法
  13. function reactive (target) {
  14.   // 创建响应式对象
  15.   return createReactiveObject(target)
  16. }
  18. // 创建响应式对象
  19. function createReactiveObject (target) {
  20.   if (!isObject(target)) { // 如果当前不是对象，直接返回
  21.     return target
  22.   }
  23.   let baseHandler = {
  24.     // Reflect 优点不会报错，会有返回值 会替代掉 Object 上的方法
  25.     get (target, key, receiver){
  26.       console.log('获取')
  27.       let result = Reflect.get(target, key, receiver)
  28.       return result
  29.     },
  30.     set (target, key, value, receiver) {
  31.       console.log('设置')
  32.       let result = Reflect.set(target, key, value, receiver)
  33.       return result
  34.     },
  35.     deleteProperty (target, key) {
  36.       console.log('删除')
  37.       let result = Reflect.deleteProperty(target, key)
  38.       return result
  39.     }
  40.   }
  41.   let observed = new Proxy(target, baseHandler) // es6
  42.   return observed
  43. }
  45. let proxy = reactive({
  46.   name: 'zhoujiawei'
  47. })
  48. // 获取
  49. console.log(proxy.name)
  50. // 设置
  51. proxy.name = 'allen'
  52. console.log(proxy.name)
  53. // 删除
  54. delete proxy.name
  55. console.log(proxy.name)

image.png

对象多层嵌套

  1. // 弱映射表
  2. // 用来屏蔽多次 new 以及多层代理
  3. let toProxy = new WeakMap() // es6 放置的是 原对象：代理过的对象
  4. let toRaw = new WeakMap() // 被代理过的对象：原对象
  5. // 判断是不是对象
  6. function isObject (val) {
  7.   return typeof val === 'object' && val !== null
  8. }
  10. // 判断是否含有属性
  11. function hasOwn (target, key) {
  12.   return target.hasOwnProperty(key)
  13. }
  15. // 响应式的核心方法
  16. function reactive (target) {
  17.   // 创建响应式对象
  18.   return createReactiveObject(target)
  19. }
  21. // 创建响应式对象
  22. function createReactiveObject (target) {
  23.   if (!isObject(target)) { // 如果当前不是对象，直接返回
  24.     return target
  25.   }
  27.   // 如果代理过了 就将代理过的结果返回
  28.   let proxy = toProxy.get(target)
  29.   if (proxy) {
  30.     return proxy
  31.   }
  33.   // 防止代理过的对象，再次代理
  34.   if (toRaw.has(target)) {
  35.     return target
  36.   }
  38.   let baseHandler = {
  39.     // Reflect 优点不会报错，会有返回值 会替代掉 Object 上的方法
  40.     get (target, key, receiver){
  41.       console.log('获取')
  42.       // Reflect 反射
  43.       let result = Reflect.get(target, key, receiver)
  44.       // result 是当前获取到的值
  45.       // **********************************
  46.       return isObject(result) ? reactive(result) : result // 有选择的递归
  47.       // **********************************
  48.     },
  49.     set (target, key, value, receiver) {
  50.       // 识别是改属性 还是新增属性
  51.       let hadKey = hasOwn(target, key)
  52.       let oldValue = target[key]
  53.       let result = Reflect.set(target, key, value, receiver)
  54.       if (!hadKey) {
  55.         console.log('新增属性')
  56.       } else if (oldValue !== value) {
  57.         console.log('修改属性')
  58.       }
  59.       console.log('设置')
  60.       return result
  61.     },
  62.     deleteProperty (target, key) {
  63.       console.log('删除')
  64.       let result = Reflect.deleteProperty(target, key)
  65.       return result
  66.     }
  67.   }
  68.   let observed = new Proxy(target, baseHandler) // es6
  69.   toProxy.set(target, observed)
  70.   toRaw.set(observed, target)
  71.   return observed
  72. }
  74. let proxy = reactive([1, 2, 3])
  75. proxy.push(4)

effect 副作用

effect 副作用方法：默认先执行一次，当依赖数据变化的时候会再次执行，effect 也是响应式的核心。（watch 也是调用 effect ）

  1. // 弱映射表
  2. // 用来屏蔽多次 new 以及多层代理
  3. let toProxy = new WeakMap() // es6 放置的是 原对象：代理过的对象
  4. let toRaw = new WeakMap() // 被代理过的对象：原对象
  5. // 判断是不是对象
  6. function isObject (val) {
  7.   return typeof val === 'object' && val !== null
  8. }
  10. // 判断是否含有属性
  11. function hasOwn (target, key) {
  12.   return target.hasOwnProperty(key)
  13. }
  15. // 响应式的核心方法
  16. function reactive (target) {
  17.   // 创建响应式对象
  18.   return createReactiveObject(target)
  19. }
  21. // 创建响应式对象
  22. function createReactiveObject (target) {
  23.   if (!isObject(target)) { // 如果当前不是对象，直接返回
  24.     return target
  25.   }
  27.   // 如果代理过了 就将代理过的结果返回
  28.   let proxy = toProxy.get(target)
  29.   if (proxy) {
  30.     return proxy
  31.   }
  33.   // 防止代理过的对象，再次代理
  34.   if (toRaw.has(target)) {
  35.     return target
  36.   }
  38.   let baseHandler = {
  39.     // Reflect 优点不会报错，会有返回值 会替代掉 Object 上的方法
  40.     get (target, key, receiver){
  41.       // Reflect 反射
  42.       let result = Reflect.get(target, key, receiver)
  43.       // result 是当前获取到的值
  45.       // 收集依赖 订阅 把当前的 key 和这个 effect 对应起来
  46.       track(target, key) // 如果目标上这个 key 变化了 重新让数组中的 effect 执行
  48.       return isObject(result) ? reactive(result) : result // 有选择的递归
  49.     },
  50.     set (target, key, value, receiver) {
  51.       // 识别是改属性 还是新增属性
  52.       let hadKey = hasOwn(target, key)
  53.       let oldValue = target[key]
  54.       let result = Reflect.set(target, key, value, receiver)
  55.       if (!hadKey) {
  56.         trigger(target, 'add', key)
  57.       } else if (oldValue !== value) {
  58.         trigger(target, 'set', key)
  59.       }
  60.       return result
  61.     },
  62.     deleteProperty (target, key) {
  63.       let result = Reflect.deleteProperty(target, key)
  64.       return result
  65.     }
  66.   }
  67.   let observed = new Proxy(target, baseHandler) // es6
  68.   toProxy.set(target, observed)
  69.   toRaw.set(observed, target)
  70.   return observed
  71. }
  73. // 依赖收集(发布订阅)
  74. // effect 副作用方法：默认先执行一次，当依赖数据变化的时候会再次执行，effect 也是响应式的核心
  75. let activeEffectStacks = [] // 栈型结果
  77. let targetsMap = new WeakMap()
  78. function track (target, key) { // 如果目标上这个 key 变化了 重新让数组中的 effect 执行
  79.   let effect = activeEffectStacks[activeEffectStacks.length - 1]
  80.   if (effect) { // 有对应关系 创建关联
  81.     // 动态创建依赖关系
  82.     let depsMap = targetsMap.get(target)
  83.     if (!depsMap) {
  84.       targetsMap.set(target, depsMap = new Map)
  85.     }
  86.     let deps = depsMap.get(key)
  87.     if (!deps) {
  88.       depsMap.set(key, deps = new Set())
  89.     }
  90.     if (!deps.has(effect)) {
  91.       deps.add(effect)
  92.     }
  93.   }
  94. }
  96. function trigger (target, type, key) {
  97.   let depsMap = targetsMap.get(target)
  98.   if (depsMap) {
  99.    let deps = depsMap.get(key)
  100.    if (deps) {
  101.     deps.forEach(effect => {
  102.       effect()
  103.     })
  104.    }
  105.   }
  106. }
  108. function effect (fn) {
  109.   // 需要把 fn 这个函数变成响应式的函数
  110.   let effect = createReactiveEffect(fn)
  111.   effect()
  112. }
  114. function createReactiveEffect (fn) {
  115.   let effect = function () {
  116.     return run(effect, fn) // 让 fn 执行，把这个 effect 存到栈中
  117.   }
  118.   return effect
  119. }
  121. function run (effect, fn) { // 运行 fn，并且将 effect 存起来
  122.   try {
  123.     activeEffectStacks.push(effect)
  124.     fn() // js 单线程
  125.   } finally {
  126.     activeEffectStacks.pop()
  127.   }
  128. }
  130. let proxy = reactive({
  131.   name: 'zhoujiawei'
  132. })
  134. effect(() => {
  135.   console.log(proxy.name)
  136. })
  138. proxy.name = 'allen'

image.png