簡單談談Vue3中的ref和reactive
一、是什么？
ref和reactive是Vue3中用來實現數據響應式的API
一般情況下，ref定義基本數據類型，reactive定義引用數據類型
（我喜歡用它來定義對象，不用它定義數組，原因后面講）
我理解的ref本質上是reactive的再封裝
二、先聊reactive
reactive定義引用數據類型（以對象和數組舉例），它能夠將復雜數據類型的內部屬性或者數據項聲明為響應式數據，所以reactive的響應式是深層次的，其底層是通過ES6的Proxy來實現數據響應式，相對于Vue2的Object.defineProperty，具有能監(jiān)聽增刪操作，能監(jiān)聽對象屬性的變化等優(yōu)點
使用reactive定義對象數據類型舉例
const paginationConfig = reactive({
pageNum: 1,
pageSize: 10
}) // 定義
const onChange = () => {
paginationConfig.pageNum = 2 // js使用
paginationConfig.pageSize = 20 // js使用
}
<!-- Vue3模板引用使用 --> <a-pagination v-model:current="paginationConfig.pageNum"></a-pagination>
若用reactive定義基本數據類型，Vue3會報警告錯誤，如圖
const str = reactive('我是字符串')
分析Vue3源碼可知，使用reactive定義響應式數據時，若數據不是對象類型直接就返回了，就不會進行后續(xù)的數據響應式處理了，這也就是我只用reactive定義對象型響應式數據的原因，那數組類型數據怎么辦呢？答案在下文中可以找到
三、再聊ref
為什么我會理解成ref是reactive的再封裝，因為在ref的底層源碼里最終還是reactive()來實現的
由源碼分析得知，如果是對象類型，底層走的還是reactive()的邏輯，另外我們知道，使用ref定義基本數據類型時，在腳本里使用時，需要加.value后綴，然而在模板里不需要，這是因為Vue3會自動幫你加上，這就使得ref相比reactive更加簡單
let num = ref(0) // 定義
let isShow = ref(false) // 定義
const onChange = () => {
num.value++ // js使用
isShow.value = true // js使用
}
<!-- Vue3模板引用使用 --> <a-modal v-model:visible="isShow"></a-modal>
四、ref和reactive定義數組對比
使用ref定義數組舉例如下
const tableData = ref([]) // 定義
const getTableData = async () => {
const { data } = await getTableDataApi() // 模擬接口獲取表格數據
tableData.value = data // 修改
}
<!-- Vue3模板引用使用 --> <a-table v-model:dataSource="tableData"></a-table>
圖中以我們常用的表格數據舉例，可以看到，ref定義數組與定義基本數據類型沒什么差別，接下來看看reactive
const tableData = reactive([]) // 定義
const getTableData = async () => {
const { data } = await getTableDataApi() // 模擬接口獲取表格數據
tableData = data // 修改，錯誤示例，這樣賦值會使tableData失去響應式
}
<!-- Vue3模板引用使用 --> <a-table v-model:dataSource="tableData"></a-table>
需要注意的是，使用 tableData = data 的修改方式會造成 tableData 響應式丟失，解決方法如下（供參考）
// 方法一：改為 ref 定義
const tableData = ref([])
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.value = data // 使用.value重新賦值
}
// 方法二：使用 push 方法
const tableData = reactive([])
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.push(...data) // 先使用...將data解構，再使用push方法
}
// 方法三：定義時數組外層嵌套一個對象
const tableData = reactive({ list:[] })
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData.list = data // 通過訪問list屬性重新賦值
}
// 方法四：賦值前再包一層 reactive
const tableData = reactive([])
const getTableData = async () => {
const { data } = await getTableDataApi()
tableData = reactive(data) // 賦值前再包一層reactive
}
五、對比總結
- ref用于定義基本類型和引用類型，reactive僅用于定義引用類型
- reactive只能用于定義引用數據類型的原因在于內部是通過ES6的Proxy實現響應式的，而Proxy不適用于基本數據類型
- ref定義對象時，底層會通過reactive轉換成具有深層次的響應式對象，所以ref本質上是reactive的再封裝
- 在腳本里使用ref定義的數據時，記得加.value后綴
- 在定義數組時，建議使用ref，從而可避免reactive定義時值修改導致的響應式丟失問題
總結
到此這篇關于簡單談談Vue3中ref和reactive的文章就介紹到這了,更多相關Vue3中ref和reactive內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vConsole?是框架無關的，可以在?Vue、React?或其他任何框架中使用，今天通過本文給大家介紹移動端調試神器vConsole使用，感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了vue日志之如何select選中默認值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vant組件適用于移動端項目,目前項目開源,是市面上做的比較好的開源項目,功能比較強大,本文小編就來為大家介紹一下如何利用vant實現輪播圖效果吧2023-10-10
vue 中基于html5 drag drap的拖放效果案例分析
本文通過三個案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11
組件(Component)是 Vue.js 最強大的功能之一,組件可以擴展 HTML 元素,封裝可重用的代碼,這篇文章主要給大家介紹了關于Vue封裝全局toast組件,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue-CLI3.x 設置反向代理的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue2中seo時使用vue-meta-info,本文通過實例代碼給大家詳細講解，文末給大家補充介紹了vue seo管理 vue-meta-info 動態(tài)設置meta和title的相關知識，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
vue element-ui實現el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現el-table表格多選以及回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue是一套構建用戶界面的框架， 開發(fā)只需要關注視圖層， 它不僅易于上手，還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下2019-12-12