您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue3中的ref和reactive怎么使用的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
ref和reactive是Vue3中用來實現(xiàn)數(shù)據(jù)響應式的API
一般情況下,ref
定義基本數(shù)據(jù)類型,reactive
定義引用數(shù)據(jù)類型
reactive定義引用數(shù)據(jù)類型(以對象和數(shù)組舉例),它能夠?qū)碗s數(shù)據(jù)類型的內(nèi)部屬性或者數(shù)據(jù)項聲明為響應式數(shù)據(jù),所以reactive的響應式是深層次的,其底層是通過ES6的Proxy
來實現(xiàn)數(shù)據(jù)響應式,相對于Vue2的Object.defineProperty
,具有能監(jiān)聽增刪操作,能監(jiān)聽對象屬性的變化等優(yōu)點
使用reactive定義對象數(shù)據(jù)類型舉例
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定義基本數(shù)據(jù)類型,Vue3會報警告錯誤,如圖
const str = reactive('我是字符串')
分析Vue3源碼可知,使用reactive定義響應式數(shù)據(jù)時,若數(shù)據(jù)不是對象類型直接就返回了,就不會進行后續(xù)的數(shù)據(jù)響應式處理了,這也就是我只用reactive定義對象型響應式數(shù)據(jù)的原因,那數(shù)組類型數(shù)據(jù)怎么辦呢?答案在下文中可以找到
為什么我會理解成ref是reactive的再封裝,因為在ref的底層源碼里最終還是reactive()來實現(xiàn)的
由源碼分析得知,如果是對象類型,底層走的還是reactive()的邏輯,另外我們知道,使用ref定義基本數(shù)據(jù)類型時,在腳本里使用時,需要加.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定義數(shù)組舉例如下
const tableData = ref([]) // 定義 const getTableData = async () => { const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù) tableData.value = data // 修改 }
<!-- Vue3模板引用使用 --> <a-table v-model:dataSource="tableData"></a-table>
圖中以我們常用的表格數(shù)據(jù)舉例,可以看到,ref定義數(shù)組與定義基本數(shù)據(jù)類型沒什么差別,接下來看看reactive
const tableData = reactive([]) // 定義 const getTableData = async () => { const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù) 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解構(gòu),再使用push方法 } // 方法三:定義時數(shù)組外層嵌套一個對象 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 }
以上就是“Vue3中的ref和reactive怎么使用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。