當前位置:編程學習大全網 - 源碼下載 - Vue3的ref和reactive區別及使用

Vue3的ref和reactive區別及使用

1)ref創建壹個響應式數據,壹般來說用於創建簡單類型的響應式對象,比如String、Number、boolean類型;

2)當我們給ref傳遞壹個值之後,如果使用的是基本類型響應式依賴Object.defineProperty( )的get( )和set( ),如果ref使用的是引用類型,ref函數底層會自動將ref轉換成reactive; ref(18) => reactive({value:18});

3)需要註意的是ref定義的值在Vue中使用直接使用所定義的字段,但是在js中獲取或者修改值需要通過value;

4)ref也可以創建引用類型,對於復雜的對象,值是壹個被proxy攔截處理過的對象,但是裏面的屬性不是RefImpl類型的對象,proxy代理的對象同樣被掛載到value上,所以可以通過obj.value.key來讀取屬性,這些屬性同樣也是響應式的,更改時可以觸發視圖的更新

具體使用及結構打印如下:

1)reactive裏面參數定義必須是對象或者數組(json/arr),本質將傳入的數據包裝成proxy對象;

2)基於Es6的Proxy實現,通過Reflect反射代理操作源對象,相比於reactive定義的淺層次響應式數據對象,reactive定義的是更深層次的響應式數據對象;

3)

1)壹般來說,ref被用來定義簡單的字符串或者數值,而reactive被用來定義對象數組等

2)實際上都能用,而且ref也可以去定義簡單的對象和數組,也是具有響應式的,不過官方文檔中有提到如果將對象分配為ref值,則可以通過reactive方法使該對象具有高度的響應式。

  • 上一篇:ant編譯nutch2.x需要多長時間
  • 下一篇:如何用表制作萬年歷
  • copyright 2024編程學習大全網