Vue3 Ref 与 Reactive的区别

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

Vue2 中操作

<template>
  <button type="button" @click="addNum">addNum{{ num }}</button>
</template>
<script>
export default ({
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    addNum() {
      this.num++;
    },
  },
});

Vue3 ref

ref 支持传入常用基础类型(String,Number,,Boolean,Null, Undefined)

ref()将其标记为响应式数据。在Vue 3内部，Vue将创建一个Proxy代理对象。

<template>
  <button type="button" @click="addNum">addNum{{ num }}</button>
</template>
<script>
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup: () => {
    const num = ref(0);
    const addNum = () => {
      num.value++;
    };
    return {
      num,
      addNum
    };
  },
});

Vue3 reactive

只支持传入引用类型(object)

<template>
  <button type="button" @click="countNum.addNum">addNum{{ countNum.num }}</button>
</template>
<script>
import { reactive, defineComponent } from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup: () => {
    const countNum = reactive({
      num: 0,
      addNum() {
        countNum.num ++
      }
    })
    return {
      countNum
    };
  },
});
</script>

Ref vs Reactive 有什么区别

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

<template>
  <button type="button" @click="countNum.addNum">addNum{{ countNum.num }}</button>
</template>
<script>
import { ref, defineComponent } from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup: () => {
    const countNum = ref({
      num: 0,
      addNum() {
        countNum.value.num ++
      }
    }) 
    return {
      countNum
    };
  },
});
</script>

为什么 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)

<template>
  <button type="button">addNum{{ num }}</button>
</template>
<script>
import { reactive, defineComponent } from "vue";
export default defineComponent({
  name: "HelloWorld",
  setup: () => {
    const num = reactive(0)
    return {
      num
    };
  },
});
</script>

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就是让你的代码逻辑 可零散,可独立,可组织,可复用,少冗余,最重要的是更便于阅读与维护
如有理解偏差欢迎指正