书接上回手写vue中的reactive之后再手写ref 了解源码之后你会选择ref还是reactive呢？

用js手撕ref 了解原理之后你是选择ref还是reactive呢？

哈喽哈喽，我是你们的金樽清酒。在上篇文章用js之后。我们埋下了一个伏笔。那就是如何用js打造一个ref出来。相信很多小伙伴通常会在选择ref还是reactive中间犯难，或许你看完源码自己打造一个之后就会有更好的答案。找到自己内心的那个答案是吧。做出选择那肯定是要有对比的咯，比如这个好看一点，那个高一点，肯定是各有优势才会让你为难？好了，那今天我们的重点就是手写ref。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！"

知识拓展 set和get的作用

我们知道，对象字面量里面是可以放函数的。但是访问该对象里面的属性的时候是不是也要调用呢？

js 复制代码

 let obj = {
            name: "li",
             value() {
                return 28
            },
            // set value(newVal) {
            //     console.log(newVal, "--------")
            // }
        }
        console.log(obj.name)
        console.log(obj.value())

比如我们打印obj里面的value的时候是不是要obj.value()，value要调用才能执行，这样的话会很麻烦，不像访问name一样，直接obj.name。

但是有没有一种方法，将value也能像name一样访问，不需要调用呢？诶，还真有，那就是在前面加get。get可以将属性与函数绑定，当属性被访问时，对应函数会执行。当然还有set。set也是将属性与函数绑定，但是它接受一个参数，当属性发生变化时对应函数被执行。我们可以看看下面的代码。

js 复制代码

  let obj = {
            name: "li",
            get value() {
                return 28
            },
            set value(newVal) {
                console.log(newVal, "--------")
            }
        }
        obj.value = 18
        console.log(obj.name)
        console.log(obj.value)

你看这样我们就可以像访问name一样访问value，对应的函数会自动执行。

打造ref的理念

想一想为什么我要做一个这样的拓展呢？我们在用到ref的时候是不是后面都得加一个value呢？诶，是不是明白了什么。对，什么是响应式，那就是得有一个场所对数据进行处理。像我们前面reactive的理念是用proxy作为这个场所作为代理。那在ref里面value就是这个场所。所以为了方便我们通常加上get，set不用再调用，所以没错,value就是对象里面的方法。

js 复制代码

import { reactive } from './reactive.js'
import { track, trigger } from './effect.js'


export function ref(val) {  // 将原始类型数据变成响应式 引用类型也可以
  return createRef(val)
}

function createRef(val) {
  // 判断val是否已经是响应式
  if (val.__v_isRef) {
    return val
  }

  // 将val变为响应式
  return new RefImpl(val)
}


 // const age = ref({n: 18})
class RefImpl {  
  constructor(val) {
    this.__v_isRef = true // 给每一个被ref操作过的属性值都添加标记
    this._value = convert(val)
  }

  get value() {
    // 为this对象做依赖收集
    track(this, 'value')
    return this._value
  }

  set value(newVal) {
    // console.log(newVal);
    
    if (newVal !== this._value) {
      this._value = convert(newVal)
      trigger(this, 'value') // 触发掉 'value' 上的所有副作用函数
    }
  }

}

function convert(val) {
  if (typeof val !== 'object' || val === null) {  // 不是对象
    return val
  } else {
    return reactive(val)
  }
}

看到上面的代码，我们是如何打造ref的呢？其实，和打造reactive一样，三个核心理念

将数据代理
收集依赖
触发依赖
不知道核心理念的可以去看我的手写reactive。

那我们知道，reactive的将对象代理是通过proxy完成的，它只能代理对象，而我们ref是将原始数据类型转化为响应式的。那js有没有像proxy一样的功能但是接受原始数据类型呢？答案是没有。所以我们需要自己构造一个函数来完成这个功能。如代码21行到50行。然后在createref实例化这个对象就是将数据代理为响应式，最后在ref里面返回createref，所以最后的ref其实是一个实例化的对象。然后我们的依赖收集就在get value里面。依赖触发就在set value里面。收集依赖，和触发依赖的函数在上篇打造reactive里面effrct.js里面。这里我直接引用了。

在44-55行，我们判断了参数的类型，如果是原始数据类型，用value可以完成代理，如果是引用数据类型，还是直接用reactive的源码。哈哈哈哈哈哈，所以你可以看到这里我们直接引用了reactivef方法。

所以说，ref里面是内置了一个reactive的，功能会比reactive更强，因为reactive是通过proxy代理的，而proxy是只能接受对象作为参数，所以有一定的局限性。ref就通过写一个构造函数来弥补这个缺陷，但是你看由于ref是一个实例化对，我们要访问值必须访问value属性，所以ref要.value一下。再看一下为什么我要补充一下set和get呢？不然我们的ref就要这么写了。.value()。

代码总汇和效果

文件路径

html 复制代码

<!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 { effect } from './effect.js';
        import { ref } from './ref.js'
        const state = ref({
            name: "li",
            age: 18
        })
        const college = ref("东华理工大学")
        effect(
            () => {
                console.log(`${state.value.name}今年${state.value.age}岁了，在${college.value}`);
            },
            { lazy: false }
        )
        setInterval(() => {
            state.value.age = state.value.age + 1
            console.log(state.value)
        }, 2000)
    </script>
</body>

</html>

reactive.js 复制代码

复制代码
import { mutableHandlers } from './baseHandlers.js'

// 保存被代理过的对象
export const reactiveMap = new WeakMap() // new Map() // new WeakMap 对内存的回收更加友好


export function reactive(target) { // 将target变成响应式
    return createReactiveObject(target, reactiveMap, mutableHandlers)
}


export function createReactiveObject(target, proxyMap, proxyHandlers) { // 创建响应式的函数
    // 判断target是不是一个引用类型
    if (typeof target !== 'object' || target === null) {  // 不是对象就不给操作
        return target
    }

    // 该对象是否已经被代理过(已经是响应式对象)
    const existingProxy = proxyMap.get(target)
    if (existingProxy) {
        return existingProxy
    }

    // 执行代理操作（将target处理成响应式）
    const proxy = new Proxy(target, proxyHandlers) // 第二个参数的作用：当target被读取值，设置值，判断值等等操作时会触发的函数

    // 往 proxyMap 增加 proxy, 把已经代理过的对象缓存起来
    proxyMap.set(target, proxy)

    return proxy
}

baseHandlers.js 复制代码

复制代码
import { track, trigger } from './effect.js'
const get = createGetter(); // 创建一个get函数
const set = createSetter(); // 创建一个set函数

function createGetter() {
    return function get(target, key, receiver) {
        console.log('target被读取值');
        const res = Reflect.get(target, key, receiver); // 获取源对象中的键值
        // 这个属性究竟还有哪些地方用到了，（副作用函数的收集，computed,watch...）
        track(target, key)


        return res;
    }
}

function createSetter() {
    return function set(target, key, value, receiver) {
        console.log('target被设置值', key, value);
        const res = Reflect.set(target, key, value, receiver); // 设置源对象中的键值 === target[key] = value


        // 需要记录下来此时是哪一个key的值变更了，再去通知其他依赖该值的函数生效，更新浏览器的视图(响应式)
        // 触发被修改的属性身上的副函数 依赖收集（被修改的key在哪些地方被使用了）发布订阅
        trigger(target, key)
        return res;
    }
}


export const mutableHandlers = {
    get,
    set,
}

effect.js 复制代码

复制代码
const targetMap = new WeakMap()
let activeEffect = null  // 得是一个副作用函数

export function effect(fn, options = {}) { // 也是watch，computed 的核心逻辑
    const effectFn = () => {
        try {
            activeEffect = effectFn
            return fn()
        } finally {
            activeEffect = null
        }
    }
    if (!options.lazy) {
        effectFn()
    }
    return effectFn
}


// 为某个属性添加 effect
export function track(target, key) {
    // targetMap = {  // 存成这样
    //   target: {
    //     key: [effect1, effect2, effect3,...]
    //   },
    //   target2: {
    //     key: [effect1, effect2, effect3,...]
    //   }
    // }

    let depsMap = targetMap.get(target)
    if (!depsMap) { // 初次读取到值 收集effect
        depsMap = new Map()
        targetMap.set(target, depsMap)
    }
    let deps = depsMap.get(key)
    if (!deps) { // 该属性还未添加过effect
        deps = new Set()
    }
    if (!deps.has(activeEffect) && activeEffect) {
        // 存入一个effect函数
        deps.add(activeEffect)
    }
    depsMap.set(key, deps)

}

// 触发某个属性 effect
export function trigger(target, key) {
    const depsMap = targetMap.get(target)
    if (!depsMap) { // 当前对象中所有的key都没有副作用函数（从来没有被使用过）
        return
    }

    const deps = depsMap.get(key)
    if (!deps) { // 这个属性没有依赖
        return
    }

    deps.forEach(effectFn => {
        effectFn() // 将该属性上的所有的副作用函数全部触发
    });
}

ref.js 复制代码

import { reactive } from './reactive.js'
import { track, trigger } from './effect.js'


export function ref(val) {  // 将原始类型数据变成响应式 引用类型也可以
    return createRef(val)
}

function createRef(val) {
    // 判断val是否已经是响应式
    if (val.__v_isRef) {
        return val
    }

    // 将val变为响应式
    return new RefImpl(val)
}


// const age = ref({n: 18})
class RefImpl {
    constructor(val) {
        this.__v_isRef = true // 给每一个被ref操作过的属性值都添加标记
        this._value = convert(val)
    }

    get value() {
        // 为this对象做依赖收集
        track(this, 'value')
        return this._value
    }

    set value(newVal) {
        // console.log(newVal);

        if (newVal !== this._value) {
            this._value = convert(newVal)
            trigger(this, 'value') // 触发掉 'value' 上的所有副作用函数
        }
    }

}

function convert(val) {
    if (typeof val !== 'object' || val === null) {  // 不是对象
        return val
    } else {
        return reactive(val)
    }
}





// function RefImpl(val) {
//   this.__v_isRef = true
//   this._value = val
// }
// RefImpl.prototype.value = function () {

// }

看，我们自己打造的ref就生效了。

总结

ref的设计理念其实和reactive一样。但是由于proxy只能代理对象，所以我们只能在自己打造一个构造函数来进行代理。你看我们都写出来了代理原始数据类型的构造函数。没准什么时候能手写proxy，哈哈哈哈。ref里面内置了一个reactive，所以它的功能更加强大。但是由于它返回的是一个是实例对象，我们要访问里面的value属性才能得到值，所以ref在使用的时候要加一个.value。正因为用了get和set，不然访问函数对象还要调用，形如.value()。会更加的复杂。好了希望我的文章能够帮到你，可以在评论区多交流一下哦。我来给你们解答。

书接上回 手写vue中的reactive之后 再手写ref 了解源码之后你会选择ref还是reactive呢？

用js手撕ref 了解原理之后你是选择ref还是reactive呢？

知识拓展 set和get的作用

打造ref的理念

代码总汇和效果

总结

书接上回手写vue中的reactive之后再手写ref 了解源码之后你会选择ref还是reactive呢？