vue3中 ref和reactive使用上的區別

ref和reactive使用上的區別（vue3 組合式api中）

在vue3中對響應式數據的聲明官方給出了ref()和reactive()這兩種方式
響應式數據：是指當數據改變后，Vue 會通知到使用該數據的代碼。例如，視圖渲染中使用了數據，數據改變后，視圖也會自動更新。

定義數據

reactive：參數必須是對象（json/arr）

# ref
const count = ref(0)

# reactive
const obj = reactive({ count: 0 })

修改數據

ref：必須加上.value。
reactive：不能改變對象本身，但可以改變內部count的值。（即使使用let定義，雖然不會報錯但是頁面不會有響應）

# ref
count.value = 2

# reactive
obj.count = 2

return和template中使用時，以及toRefs的使用

注意：使用toRefs時，obj里面的count與上面ref的count名稱重復了，實際使用時改個名稱

1. ref：

   在template中ref不需要加.value

   # return時
   return { count }
   # template
   <el-button type="primary" @click="count++" size="mini">count is: {{ count }}</el-button>
   

2. reactive：

   return { obj }
   # template
   <el-button type="primary" @click="obj.count++" size="mini">count is: {{ obj.count }}</el-button>
   

   “...”的意思，這里相當於return { count: toRefs(obj).count }

   return { ...toRefs(obj) }
   # template
   <el-button type="primary" @click="count++" size="mini">count is: {{ count }}</el-button>
   

關於如何選擇

參考：
reactive和ref都是用來定義響應式數據的
reactive更推薦去定義復雜的數據類型
ref更推薦定義基本類型
ref和reactive本質我們可以簡單的理解為ref是對reactive的二次包裝
使用ref定義基本數據類型，ref也可以定義數組和對象。

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

ps：官方文檔訪問速度有點慢可以自己clone下來，本地運行文檔，每次運行之前，git pull更新一下就行了。中文文檔倉庫：https://github.com/vuejs/docs-next-zh-cn，英文文檔倉庫：https://github.com/vuejs/docs-next.

原文鏈接

https://www.yuque.com/yanmou-pupa9/hkbhdx/tvrwtl
https://zhuanlan.zhihu.com/p/268053724
https://www.jianshu.com/p/43828470de79
https://www.cnblogs.com/jinzhenzong/p/12778729.html