Vue 3源码极客之：`Vue`的`Composition API`：`setup`函数中的`ref`和`reactive`如何被转换。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！欢迎来到今天的“Vue 3 源码极客之：Composition API 探秘”讲座。今天咱们要聊聊 Composition API 中两个重量级选手：ref 和 reactive 在 setup 函数里是如何被“炼成”的。准备好了吗？咱们开始吧！

第一幕：setup 函数登场

首先，咱们得搞清楚 setup 函数是个什么角色。简单来说，它就是 Composition API 的大本营，你可以在这里面定义数据、方法，然后把它们暴露给模板使用。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 定义一个响应式的数据 count
    const increment = () => {
      count.value++;
    };

    return {
      count, // 将 count 暴露给模板
      increment // 将 increment 暴露给模板
    };
  }
};
</script>

在这个例子里，count 就是一个响应式的数据，它的值会随着 increment 函数的调用而更新，并且模板也会自动更新。这就是 ref 的魔力。

第二幕：ref 的“炼金术”

ref 的作用是创建一个响应式的引用。它接收一个初始值，然后返回一个带有 .value 属性的对象。这个 .value 属性就是存放真实值的地方。

那么，ref 内部到底做了什么呢？简单来说，它做了以下几件事：

判断类型： 首先，ref 会判断你传进来的初始值是什么类型。
创建响应式对象： 如果初始值本身就是一个对象，那么 ref 会调用 reactive 函数（稍后会讲到）把它变成一个响应式对象。如果不是对象，那么 ref 会创建一个包含 .value 属性的普通对象，并使用 Object.defineProperty 或者 Proxy (取决于浏览器支持) 来劫持 .value 属性的读取和设置操作。
返回响应式对象： 最后，ref 返回这个响应式对象。

咱们来看看 ref 的简化版源码（注意，这只是简化版，真实源码要复杂得多）：

function ref(raw) {
  if (isRef(raw)) {  //如果是ref直接返回
    return raw
  }
  return createRef(raw)
}

function isRef(r) {
  return !!(r && r.__v_isRef)
}

function createRef(raw) {
  if (isReactive(raw)) { //如果raw已经是reactive对象则直接返回
    return raw
  }
  return new RefImpl(raw)
}

function isReactive(value) {
  return !!(value && value.__v_isReactive)
}

class RefImpl {
  constructor(value) {
    this.__v_isRef = true; // 标记这是一个 ref 对象
    this._value = convert(value); // 如果 value 是对象，则转换为响应式对象
  }

  get value() {
    // 依赖收集
    track(this, 'value');
    return this._value;
  }

  set value(newValue) {
    if (newValue !== this._value) {
      this._value = convert(newValue);
      // 触发更新
      trigger(this, 'value');
    }
  }
}

function convert(value) {
  return isObject(value) ? reactive(value) : value;
}

function isObject(val) {
  return val !== null && typeof val === 'object'
}

// 模拟依赖收集和触发更新
let targetMap = new WeakMap()
let activeEffect = null

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      depsMap = new Map()
      targetMap.set(target, depsMap)
    }
    let dep = depsMap.get(key)
    if (!dep) {
      dep = new Set()
      depsMap.set(key, dep)
    }
    dep.add(activeEffect)
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const dep = depsMap.get(key)
  if (!dep) {
    return
  }
  dep.forEach(effect => {
    effect()
  })
}

function effect(fn) {
  activeEffect = fn
  fn() // 触发get，进行依赖收集
  activeEffect = null
}

function reactive(target) {
  if (!isObject(target)) {
    return target
  }

  const existingProxy = reactiveMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver)
      // 依赖收集
      track(target, key);
      return isObject(res) ? reactive(res) : res
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key);
      }
      return result
    }
  })
  reactiveMap.set(target, proxy)
  return proxy
}

const reactiveMap = new WeakMap()

// 示例用法
let myValue = ref({ count: 0 });
effect(() => {
  console.log('Value changed:', myValue.value.count);
});

myValue.value.count = 1; // 控制台输出: Value changed: 1
myValue.value.count = 2; // 控制台输出: Value changed: 2

在这个简化版的源码中，RefImpl 类是 ref 的核心实现。它使用 Object.defineProperty 来劫持 .value 属性的读取和设置操作。当读取 .value 属性时，会进行依赖收集；当设置 .value 属性时，会触发更新。

重点来了！ ref 的一个重要特性是：如果初始值是一个对象，那么 ref 会调用 reactive 函数把这个对象变成一个响应式对象。这意味着，你可以直接修改 ref.value 里面的属性，而不需要再使用 ref 来包裹它们。

第三幕：reactive 的“变形术”

reactive 的作用是将一个普通对象变成一个响应式对象。它会递归地遍历对象的所有属性，并使用 Proxy 来劫持属性的读取和设置操作。

咱们来看看 reactive 的简化版源码：

function reactive(target) {
  if (!isObject(target)) {
    return target; // 不是对象，直接返回
  }

  if (isReactive(target)) {
    return target // 已经是响应式对象，直接返回
  }

  const existingProxy = reactiveMap.get(target);
  if (existingProxy) {
    return existingProxy; // 已经创建过 Proxy，直接返回
  }

  const proxy = new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver);

      // 依赖收集
      track(target, key);

      // 如果属性值也是对象，递归地将它变成响应式对象
      return isObject(res) ? reactive(res) : res;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        // 触发更新
        trigger(target, key);
      }
      return result;
    }
  });

  reactiveMap.set(target, proxy); // 缓存 Proxy 对象
  return proxy;
}

function isObject(val) {
  return val !== null && typeof val === 'object';
}

function isReactive(value) {
  return !!(value && value.__v_isReactive)
}

在这个简化版的源码中，reactive 函数使用 Proxy 来劫持对象的属性读取和设置操作。当读取属性时，会进行依赖收集；当设置属性时，会触发更新。

重点来了！ reactive 会递归地将对象的所有属性变成响应式的。这意味着，你可以直接修改响应式对象的任何属性，而不需要再使用 ref 或 reactive 来包裹它们。

第四幕：ref 和 reactive 的区别

既然 ref 和 reactive 都能创建响应式数据，那么它们有什么区别呢？咱们用一个表格来总结一下：

特性	`ref`	`reactive`
作用	创建一个包含 `.value` 属性的响应式引用	将一个对象变成响应式对象
初始值类型	可以是任何类型	必须是对象
使用方式	通过 `.value` 访问和修改值	直接访问和修改属性
嵌套	如果初始值是对象，会自动调用 `reactive`	会递归地将对象的所有属性变成响应式的
适用场景	适用于基本类型和对象类型	适用于复杂对象

简单来说：

如果你要创建一个响应式的基本类型数据（比如数字、字符串、布尔值），那么就用 ref。
如果你要创建一个响应式的对象，那么就用 reactive。

第五幕：实战演练

咱们来看几个例子，加深一下理解：

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式的基本类型数据
    const count = ref(0);

    // 使用 reactive 创建响应式的对象
    const state = reactive({
      name: 'Vue',
      age: 3
    });

    const increment = () => {
      count.value++;
    };

    const updateName = (newName) => {
      state.name = newName;
    };

    return {
      count,
      state,
      increment,
      updateName
    };
  }
};

在这个例子中，count 是一个响应式的数字，我们需要通过 count.value 来访问和修改它的值。state 是一个响应式的对象，我们可以直接通过 state.name 和 state.age 来访问和修改它的属性。

第六幕：避坑指南

在使用 ref 和 reactive 的时候，有一些坑需要注意：

不要解构 reactive 对象： 解构 reactive 对象会导致响应式丢失。比如：

const state = reactive({ count: 0 });
const { count } = state; // 错误！count 不再是响应式的
count++; // 不会触发更新

正确的做法是直接使用 state.count，或者使用 toRefs 函数将 reactive 对象的属性转换为 ref 对象。

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const { count } = toRefs(state); // 正确！count 是一个 ref 对象
    return {
      ...toRefs(state)
    };
  }
};

ref 的 .value 属性： 不要忘记 ref 对象需要通过 .value 属性来访问和修改值。
深层嵌套的对象： reactive 会递归地将对象的所有属性变成响应式的，但是如果对象嵌套太深，可能会影响性能。

第七幕：总结

今天咱们聊了 Composition API 中 ref 和 reactive 的实现原理和使用方法。希望通过今天的讲座，大家能够对 ref 和 reactive 有更深入的理解，并在实际开发中灵活运用它们。

总而言之，ref 就像一个“盒子”，你把数据放进去，它就变成响应式的了，你需要通过 .value 来打开盒子取出数据。而 reactive 就像一个“魔法”，它直接把整个对象都变成响应式的了，你可以直接修改对象的属性。

记住：ref 用于基本类型，reactive 用于对象。解构需谨慎，toRefs 来帮忙。

今天的讲座就到这里，感谢大家的观看！下次再见！

发表回复 取消回复

发表回复取消回复