Vue3 Ref 与 Reactive的区别

Vue3 在组件中使用ref()或reactive()都可以创建响应式数据

Vue2 中操作

Ref vs Reactive 有什么区别

ref是否可以支持传入引用类型,可以,并且也可以正常运行

为什么 ref也可以传入引用类型?

我们只将ref()用于基本类型数据，并将reactive()用于引用类型数据。当我开始构建组件时，情况并非总是如此，事实上文档说明：您仍然可以使用ref()，但是在内部只是调用reactive()函数，所以我将坚持使用reactive()。

翻看源码

const convert = (val) => isObject(val) ? reactive(val) : val;
function isRef(r) {
    return Boolean(r && r.__v_isRef === true);
}

reactive是否支持传入基础类型

可以渲染,不能操作,提示警告 value cannot be made reactive: 0(不能使用响应值0)

reactive为什么不支持传入基础类型? 翻阅源码发现

发现用reactive定义number变量时，vue给出了一个警告，提示这个值不能被reactive创建,并直接被返回

引用类型 才会进行下来的代理操作

  function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers) {
      if (!isObject(target)) {
          { // 这里.......
              console.warn(`value cannot be made reactive: ${String(target)}`);
          }
          return target;
      }
      // target is already a Proxy, return it.
      // exception: calling readonly() on a reactive object
      if (target["__v_raw" /* RAW */] &&
          !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {
          return target;
      }
      // target already has corresponding Proxy
      const proxyMap = isReadonly ? readonlyMap : reactiveMap;
      const existingProxy = proxyMap.get(target);
      if (existingProxy) {
          return existingProxy;
      }
      // only a whitelist of value types can be observed.
      const targetType = getTargetType(target);
      if (targetType === 0 /* INVALID */) {
          return target;
      }
      const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);
      proxyMap.set(target, proxy);
      return proxy;
  }

总结

ref()用于创建基本类型响应数据

reactive()用于创建引用类型响应数据

当num是一个单一属性，推荐ref()

当逻辑开始变得复杂,我们就使用这种方式

setup: () => {
    const countNum = reactive({
      num: 0,
      addNum() {
        countNum.num ++
      }
    })
    return {
      countNum
    };
  },

reactive 就像在 Vue2 中Vue.observable() 单独领出来进行多组件复用也行,当前组件使用也行

最后

两个API就是让你的代码逻辑 可零散,可独立,可组织,可复用,少冗余,最重要的是更便于阅读与维护
如有理解偏差欢迎指正