Vue.js 3.0-响应式系统原理

亦凉 2022-11-13 06:21 175阅读 0赞

# 响应式系统原理-介绍 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]  
这里的代码主要显示俩个小问题

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <script>
        'use strict'
        // 问题1： set 和 deleteProperty 中需要返回布尔类型的值
        // 在严格模式下，如果返回 false 的话会出现 Type Error 的异常
        // const target = { 
        // foo: 'xxx',
        // bar: 'yyy'
        // }
        // Reflect 反射，运行的时候获取或设置对象成员
        // // Reflect.getPrototypeOf()
        // // Object.getPrototypeOf()
        // const proxy = new Proxy(target, { 
        // get (target, key, receiver) { 
        // // return target[key]
        // return Reflect.get(target, key, receiver)
        // },
        // set (target, key, value, receiver) { 
        // // target[key] = value
        // return Reflect.set(target, key, value, receiver)
        // },
        // deleteProperty (target, key) { 
        // // delete target[key]
        // return Reflect.deleteProperty(target, key)
        // }
        // })
    
        // proxy.foo = 'zzz'
        // // delete proxy.foo
    
    
        // 问题2：Proxy 和 Reflect 中使用的 receiver
    
        // Proxy 中 receiver：Proxy 或者继承 Proxy 的对象
        // Reflect 中 receiver：如果 target 对象中设置了 getter，getter 中的 this 指向 receiver
    
        const obj = { 
          get foo() { 
            console.log(this)
            return this.bar
          }
        }
    
        const proxy = new Proxy(obj, { 
          get (target, key, receiver) { 
            if (key === 'bar') {  
              return 'value - bar' 
            }
            return Reflect.get(target, key, receiver)
          }
        })
        console.log(proxy.foo)
      </script>
    </body>
    </html>

# 响应式系统原理-reactive #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]

const isObject = val => val !== null && typeof val === 'object'
                                //因为null也属于object，所以要判断一下
    const convert = target => isObject(target) ? reactive(target) : target
    const hasOwnProperty = Object.prototype.hasOwnProperty
    const hasOwn = (target, key) => hasOwnProperty.call(target, key)
    
    export function reactive (target) { 
      if (!isObject(target)) return target
    
      const handler = { 
        get (target, key, receiver) { 
          // 收集依赖
          track(target, key)
          const result = Reflect.get(target, key, receiver)
          return convert(result) //如果是obj 则递归否则返回
        },
        set (target, key, value, receiver) { 
          const oldValue = Reflect.get(target, key, receiver)
          let result = true //默认返回true 因为proxy需要 不返回会报typeError的错误
          if (oldValue !== value) { 
            result = Reflect.set(target, key, value, receiver)
            // 触发更新
            trigger(target, key)
          }
          return result
        },
        deleteProperty (target, key) { 
          const hadKey = hasOwn(target, key)//判断有后删除
          const result = Reflect.deleteProperty(target, key)
          if (hadKey && result) { //如果有 而且删除成功
            // 触发更新
            trigger(target, key)
          }
          return result
        }
      }
    
      return new Proxy(target, handler)
    }

# 响应式系统原理-收集依赖 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <script type="module">
        import {  reactive, effect } from './reactivity/index.js'
    
        const product = reactive({ 
          name: 'iPhone',
          price: 5000,
          count: 3
        })
        let total = 0 
        effect(() => {  //简版watch，首次渲染会调用一次函数
          total = product.price * product.count //product有变化就进行处理
        })
        console.log(total)
    
        product.price = 4000
        console.log(total)
    
        product.count = 1
        console.log(total)
    
      </script>
    </body>
    </html>

原理（看看掘金其他文章，这里没理解）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]

# 响应式系统原理-effect-track #

let activeEffect = null
    export function effect (callback) { 
      activeEffect = callback
      callback() // 访问响应式对象属性，去收集依赖
      activeEffect = null
    }
    
    let targetMap = new WeakMap()
    
    export function track (target, key) { //依赖收集函数reactive中get使用
      if (!activeEffect) return
      let depsMap = targetMap.get(target)
      if (!depsMap) { //如果没找到就加入
        targetMap.set(target, (depsMap = new Map()))
      }
      let dep = depsMap.get(key)
      if (!dep) { //如果没找到就加入
        depsMap.set(key, (dep = new Set()))
      }
      dep.add(activeEffect)
    }

# 响应式系统原理-trigger #

export function trigger (target, key) {  //reactive中 set 和delete中使用
      const depsMap = targetMap.get(target)
      // depsMap集合里存在effect的函数
      if (!depsMap) return
      const dep = depsMap.get(key)
      if (dep) { //有值的情况
        dep.forEach(effect => { 
          effect()
        })
      }
    }

# 响应式系统原理-ref #

export function ref (raw) { 
      // 判断 raw 是否是ref 创建的对象，如果是的话直接返回
      if (isObject(raw) && raw.__v_isRef) { 
        return
      }
      let value = convert(raw)//是对象就reactive
      const r = { 
        __v_isRef: true,
        get value () { 
          track(r, 'value')
          return value
        },
        set value (newValue) { 
          if (newValue !== value) { 
            raw = newValue
            value = convert(raw)//判断新值是否对象
            trigger(r, 'value')
          }
        }
      }
      return r
    }

## reactive和ref区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

# 响应式系统原理-toRefs #

功能：把proxy对象里的每一个属性都转换成ref，这样即使解构也能获得响应式的数据。

export function toRefs (proxy) { //接受一个reactive创建的对象
      const ret = proxy instanceof Array ? new Array(proxy.length) : { }
    
      for (const key in proxy) { //如果是数组所有都遍历
        ret[key] = toProxyRef(proxy, key) //这里使得解构后也能获得响应式的数据
      }
    
      return ret
    }
    
    function toProxyRef (proxy, key) { 
      const r = { 
        __v_isRef: true,
        get value () { 
          return proxy[key]
        },
        set value (newValue) { 
          proxy[key] = newValue
        }
      }
      return r
    }

# 响应式系统原理-computed #

export function computed (getter) { //接受
      const result = ref()//ref默认返回undefined
    
      effect(() => (result.value = getter()))//通过effect监听getter的响应式数据变化
    
      return result
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221022/bd1dd77b17fa4e78bc3ef3d6e768296f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/6c60532431844594b300e8c5634fcff4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/8e2a7b9db0484721b88f10d95f06fb39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/31c7b7dda21a4c09adebfc13f61d48f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210326074953327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021032607501016.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021032607575230.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70