Vue3 在組件中使用ref()或reactive()都可以創(chuàng)建響應(yīng)式數(shù)據(jù)

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 支持傳入常用基礎(chǔ)類型(String,Number,,Boolean,Null, Undefined)

ref()將其標(biāo)記為響應(yīng)式數(shù)據(jù)。在Vue 3內(nèi)部，Vue將創(chuàng)建一個(gè)Proxy代理對(duì)象。

<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 有什么區(qū)別

ref是否可以支持傳入引用類型,可以,并且也可以正常運(yùn)行

<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()用于基本類型數(shù)據(jù)，并將reactive()用于引用類型數(shù)據(jù)。當(dāng)我開始構(gòu)建組件時(shí)，情況并非總是如此，事實(shí)上文檔說明：您仍然可以使用ref()，但是在內(nèi)部只是調(diào)用reactive()函數(shù)，所以我將堅(jiān)持使用reactive()。

翻看源碼

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

reactive是否支持傳入基礎(chǔ)類型

可以渲染,不能操作,提示警告 value cannot be made reactive: 0(不能使用響應(yīng)值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為什么不支持傳入基礎(chǔ)類型? 翻閱源碼發(fā)現(xiàn)

發(fā)現(xiàn)用reactive定義number變量時(shí)，vue給出了一個(gè)警告，提示這個(gè)值不能被reactive創(chuàng)建,并直接被返回

引用類型 才會(huì)進(jìn)行下來的代理操作

  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;
  }

總結(jié)

ref()用于創(chuàng)建基本類型響應(yīng)數(shù)據(jù)

reactive()用于創(chuàng)建引用類型響應(yīng)數(shù)據(jù)

當(dāng)num是一個(gè)單一屬性，推薦ref()

當(dāng)邏輯開始變得復(fù)雜,我們就使用這種方式

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

reactive 就像在 Vue2 中Vue.observable() 單獨(dú)領(lǐng)出來進(jìn)行多組件復(fù)用也行,當(dāng)前組件使用也行

最后

兩個(gè)API就是讓你的代碼邏輯 可零散,可獨(dú)立,可組織,可復(fù)用,少冗余,最重要的是更便于閱讀與維護(hù)
如有理解偏差歡迎指正