快捷導(dǎo)航

Vue六大基本類型中的原始值響應(yīng)式

更新時間：2023年01月04日 08:40:09 作者：知奕奕

原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數(shù)接收了一個原始值作為參數(shù)，那么形參和實參之間是沒有引用關(guān)系的，它們是完全獨立的兩個值

ref

由于 proxy 無法阻止原始值的修改，故此方法在這里不管用

我們可以創(chuàng)建一個包裹對象把原始值包起來；

然后在使用 reactive 將該包裹對象變成響應(yīng)式的即可

__v_isRef 屬性是用來判斷是否為 ref 包裹對象的判據(jù)

function ref(val) {
  // 包裹對象
  const wrapper = {
    value: val,
  };
  // 是否為ref的判據(jù)
  Object.defineProperty(wrapper, "__v_isRef", {
    value: true,
  });
  // 返回響應(yīng)式數(shù)據(jù)
  return reactive(wrapper);
}

響應(yīng)丟失

響應(yīng)丟失問題：使用 reactive 創(chuàng)建響應(yīng)式對象后，使用多參的形式 return，則實際上返回的是普通對象而非響應(yīng)式對象！

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });
    return {
      ...obj,
    };
  },
};

響應(yīng)關(guān)系建立

obj 為原響應(yīng)對象

newobj 內(nèi)擁有與 obj 同名的所有屬性值，且均一一編寫訪問器屬性 value

value 執(zhí)行后返回原響應(yīng)對象中的值

這樣一來，修改 obj 屬性后，便會自動觸發(fā)副作用函數(shù)執(zhí)行！

const obj = reactive({ a: 1, b: 2 });
const newobj = {
  a: {
    get value() {
      return obj.a;
    },
  },
  b: {
    get value() {
      return obj.b;
    },
  },
};
console.log(newobj.a.value);

toRef 函數(shù)的實現(xiàn)

使用包裹 wrapper，內(nèi)部加上 getter、setter 方法實現(xiàn)響應(yīng)式

function toRef(obj, key) {
  const wrapper = {
    get value() {
      return obj[key];
    },
    set value(val) {
      obj[key] = val;
    },
  };
  Object.defineProperty(wrapper, "__v_isRef", {
    value: true,
  });
  return wrapper;
}

自動脫 ref

使用 proxy 代理

判斷如果存在屬性 __v_isRef ，表示其為 ref，則返回該 ref 的值；

如果只是普通對象，那原樣返回即可

function proxyRefs(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      return value.__v_isRef ? value.value : value;
    },
  });
}

reactive 就是一個自動脫 ref 的例子，使用他的時候無需額外調(diào)用 value 即可獲取值

到此這篇關(guān)于Vue六大基本類型中的原始值響應(yīng)式的文章就介紹到這了,更多相關(guān)Vue原始值響應(yīng)式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: