一、是什么？

ref和reactive是Vue3中用來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API

一般情況下，ref定義基本數(shù)據(jù)類型，reactive定義引用數(shù)據(jù)類型

（我喜歡用它來(lái)定義對(duì)象，不用它定義數(shù)組，原因后面講）

我理解的ref本質(zhì)上是reactive的再封裝

二、先聊reactive

reactive定義引用數(shù)據(jù)類型（以對(duì)象和數(shù)組舉例），它能夠?qū)?fù)雜數(shù)據(jù)類型的內(nèi)部屬性或者數(shù)據(jù)項(xiàng)聲明為響應(yīng)式數(shù)據(jù)，所以reactive的響應(yīng)式是深層次的，其底層是通過(guò)ES6的Proxy來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式，相對(duì)于Vue2的Object.defineProperty，具有能監(jiān)聽(tīng)增刪操作，能監(jiān)聽(tīng)對(duì)象屬性的變化等優(yōu)點(diǎn)

使用reactive定義對(duì)象數(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會(huì)報(bào)警告錯(cuò)誤，如圖

const str = reactive('我是字符串')

分析Vue3源碼可知，使用reactive定義響應(yīng)式數(shù)據(jù)時(shí)，若數(shù)據(jù)不是對(duì)象類型直接就返回了，就不會(huì)進(jìn)行后續(xù)的數(shù)據(jù)響應(yīng)式處理了，這也就是我只用reactive定義對(duì)象型響應(yīng)式數(shù)據(jù)的原因，那數(shù)組類型數(shù)據(jù)怎么辦呢？答案在下文中可以找到

三、再聊ref

為什么我會(huì)理解成ref是reactive的再封裝，因?yàn)樵趓ef的底層源碼里最終還是reactive()來(lái)實(shí)現(xiàn)的

由源碼分析得知，如果是對(duì)象類型，底層走的還是reactive()的邏輯，另外我們知道，使用ref定義基本數(shù)據(jù)類型時(shí)，在腳本里使用時(shí)，需要加.value后綴，然而在模板里不需要，這是因?yàn)閂ue3會(huì)自動(dòng)幫你加上，這就使得ref相比reactive更加簡(jiǎn)單

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定義數(shù)組對(duì)比

使用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ù)類型沒(méi)什么差別，接下來(lái)看看reactive

const tableData = reactive([]) // 定義

const getTableData = async () => {
	const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù)
	tableData = data // 修改，錯(cuò)誤示例，這樣賦值會(huì)使tableData失去響應(yīng)式
}

<!-- Vue3模板引用使用 -->
<a-table v-model:dataSource="tableData"></a-table>

需要注意的是，使用 tableData = data 的修改方式會(huì)造成 tableData 響應(yīng)式丟失，解決方法如下（供參考）

// 方法一：改為 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í)數(shù)組外層嵌套一個(gè)對(duì)象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通過(guò)訪問(wèn)list屬性重新賦值
}
// 方法四：賦值前再包一層 reactive
const tableData = reactive([])
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData = reactive(data) // 賦值前再包一層reactive
}

五、對(duì)比總結(jié)

1. ref用于定義基本類型和引用類型，reactive僅用于定義引用類型
2. reactive只能用于定義引用數(shù)據(jù)類型的原因在于內(nèi)部是通過(guò)ES6的Proxy實(shí)現(xiàn)響應(yīng)式的，而Proxy不適用于基本數(shù)據(jù)類型
3. ref定義對(duì)象時(shí)，底層會(huì)通過(guò)reactive轉(zhuǎn)換成具有深層次的響應(yīng)式對(duì)象，所以ref本質(zhì)上是reactive的再封裝
4. 在腳本里使用ref定義的數(shù)據(jù)時(shí)，記得加.value后綴
5. 在定義數(shù)組時(shí)，建議使用ref，從而可避免reactive定義時(shí)值修改導(dǎo)致的響應(yīng)式丟失問(wèn)題

總結(jié)

到此這篇關(guān)于簡(jiǎn)單談?wù)刅ue3中ref和reactive的文章就介紹到這了,更多相關(guān)Vue3中ref和reactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論