欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實現(xiàn)shallowReadonly和isProxy功能示例詳解

 更新時間:2022年12月25日 17:20:04   作者:IamZJT_  
這篇文章主要為大家介紹了實現(xiàn)shallowReadonly和isProxy功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

一、實現(xiàn)shallowReadonly

(一)單元測試

// src/reactivity/tests/shallowReadonly.spec.ts
import { isReadonly, shallowReadonly } from '../reactive';
describe('shallowReadonly', () => {
  it('should not make non-reactive properties reactive', () => {
    const props = shallowReadonly({ n: { foo: 1 } });
    expect(isReadonly(props)).toBe(true);
    expect(isReadonly(props.n)).toBe(false);
  });
});

shallowReadonly,淺層只讀,從單測也很容易看出來。一般的應用場景,可能就是用于項目的優(yōu)化,避免將深層全部轉(zhuǎn)為readonly。

(二)代碼實現(xiàn)

// src/reactivity/reactive.ts
import { mutableHandlers, readonlyHandlers, shallowReadonlyHandlers } from './baseHandlers';
export function shallowReadonly(target) {
  return createReactiveObject(target, shallowReadonlyHandlers);
}
// src/reactivity/baseHandlers.ts
import { isObject, extend } from '../shared';
function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key) {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly;
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly;
    }
    const res = Reflect.get(target, key);
    // + shallow,直接返回,深層不轉(zhuǎn)響應式
    if (shallow) {
      return res;
    }
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}
const shallowReadonlyGet = createGetter(true, true);
// + 其實可見shallowReadonly的set邏輯同readonly,所以從readonly那繼承過來,然后改寫get邏輯即可
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
  get: shallowReadonlyGet
});

最基本的邏輯,這就完成了,單測一下。

(三)額外的單測

當然為了嚴謹一些,我們還是測試一下,淺層和深層的set操作的結(jié)果,是否是我們期望的。

it('should make root level properties readonly', () => {
  console.warn = jest.fn();
  const user = shallowReadonly({ age: 10 });
  user.age = 11;
  expect(console.warn).toBeCalled();
});
it('should NOT make nested properties readonly', () => {
  console.warn = jest.fn();
  const props = shallowReadonly({ n: { foo: 1 } });
  props.n.foo = 2;
  expect(props.n.foo).toBe(2);
  expect(console.warn).not.toBeCalled();
});

二、實現(xiàn)isProxy

這里貼上官網(wǎng)對isProxy的描述。

Checks if an object is a proxy created by reactive or readonly

(一)單元測試

我們只需要在之前的用例中補充斷言即可。

// src/reactivity/tests/reactive.spec.ts
import { reactive, isReactive, isProxy } from '../reactive';
// reactive -> happy path
expect(isProxy(observed)).toBe(true);
// src/reactivity/tests/readonly.spec.ts
import { readonly, isReadonly, isProxy } from '../reactive';
// readonly -> happy path
expect(isProxy(wrapped)).toBe(true);

(二)代碼實現(xiàn)

其實實現(xiàn)起來,我們只要復用之前的isReactiveisProxy即可。

// src/reactivity/reactive.ts
export function isProxy(value) {
  return isReactive(value) || isReadonly(value);
}

以上就是實現(xiàn)shallowReadonly和isProxy功能示例詳解的詳細內(nèi)容,更多關(guān)于shallowReadonly isProxy功能的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Vue中使用Tailwind CSS的具體方法

    Vue中使用Tailwind CSS的具體方法

    本文主要介紹了Vue中使用Tailwind CSS的具體方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • 解決vue3.0運行項目warning Insert `·` prettier/prettier問題

    解決vue3.0運行項目warning Insert `·` prettier/pret

    這篇文章主要介紹了解決vue3.0運行項目warning Insert `·` prettier/prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue的自定義組件不能使用click方法的解決

    Vue的自定義組件不能使用click方法的解決

    這篇文章主要介紹了Vue的自定義組件不能使用click方法的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue雙向綁定及觀察者模式詳解

    vue雙向綁定及觀察者模式詳解

    這篇文章主要介紹了vue雙向綁定及觀察者模式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • Vue中代碼編輯器與實時預覽功能

    Vue中代碼編輯器與實時預覽功能

    CodeMirror提供了強大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當用戶編輯代碼時,實時預覽會根據(jù)代碼的變化進行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進行代碼編輯器與實時預覽,需要的朋友可以參考下
    2023-10-10
  • vue.js實現(xiàn)h5機器人聊天(測試版)

    vue.js實現(xiàn)h5機器人聊天(測試版)

    這篇文章主要為大家詳細介紹了vue.js實現(xiàn)h5機器人聊天測試版,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • 打通前后端構(gòu)建一個Vue+Express的開發(fā)環(huán)境

    打通前后端構(gòu)建一個Vue+Express的開發(fā)環(huán)境

    這篇文章主要介紹了打通前后端構(gòu)建一個Vue+Express的開發(fā)環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 分享9個Vue的巧妙冷技巧

    分享9個Vue的巧妙冷技巧

    這篇文章主要介紹了分享9個Vue的巧妙冷技巧,文章首先通過巧用$attrs和$listeners的技巧展開,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-06-06
  • vue.js表格組件開發(fā)的實例詳解

    vue.js表格組件開發(fā)的實例詳解

    Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中,Vue.js有幸受到一定程度的關(guān)注,所以本文將從各方面對Vue.js的組件開發(fā)做一個深入介紹。有需要的朋友們可以參考借鑒。
    2016-10-10
  • vue中render函數(shù)和h函數(shù)以及jsx的使用方式

    vue中render函數(shù)和h函數(shù)以及jsx的使用方式

    這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08

最新評論