一、是什么？

ref和reactive是Vue3中用來實現(xiàn)數(shù)據(jù)響應(yīng)式的API，一般情況下，ref定義基本數(shù)據(jù)類型，reactive定義引用數(shù)據(jù)類型。

二、基礎(chǔ)用法

1. ref

ref的參數(shù)一般是基本數(shù)據(jù)類型，也可以是對象類型；如果參數(shù)是對象類型，其實底層的本質(zhì)還是reactive，系統(tǒng)就會自動將ref轉(zhuǎn)換為reactive；我們?nèi)绻ピL問ref定義的值，那么就使用.value的屬性去訪問定義的數(shù)據(jù)；ref的底層原理同reactive一樣，都是Proxy。

基礎(chǔ)用法

let num = ref(0) // 定義
let isShow = ref(false)  // 定義
const onChange = () => {
	num.value++  // js使用
	isShow.value = true  // js使用
}

<!-- Vue3模板引用使用 -->
<Modal v-model="isShow"></Modal>

2. reactive

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

基礎(chǔ)用法

const pageConfig = reactive({
	pageNum: 1,
	pageSize: 10
}) // 定義
const onChange = () => {
	pageConfig.pageNum = 2;
	pageConfig.pageSize = 20;
}

<!-- Vue3模板引用使用 -->
<Page :current="pageConfig.pageNum"></Page>

若用reactive定義基本數(shù)據(jù)類型，Vue3會報警告錯誤，如圖

const str = reactive('字符串')

 3. ref和reactive定義數(shù)組對比

ref定義數(shù)組

const tableData = ref([]) // 定義
const getTableData = async () => {
	const { data } = await getTableDataApi() // 模擬接口獲取表格數(shù)據(jù)
	tableData.value = data // 修改
}

<!-- Vue3模板引用使用 -->
<Table :data="tableData"></Table>

以我們常用的表格數(shù)據(jù)舉例，可以看到，ref定義數(shù)組與定義基本數(shù)據(jù)類型沒什么差別，接下來看看reactive

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

<!-- Vue3模板引用使用 -->
<Table :data="tableData"></Table>

需要注意的是，reactive定義的數(shù)組使用 tableData = data 的修改方式會造成 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ù)組外層嵌套一個對象
const tableData = reactive({ list:[] })
const getTableData = async () => {
	const { data } = await getTableDataApi()
	tableData.list = data // 通過訪問list屬性重新賦值
}

4. Proxy vs defineProperty

reactive方法內(nèi)部是利用ES6的Proxy API來實現(xiàn)的，這里與Vue2中的defineProperty方法有本質(zhì)的區(qū)別。

• defineProperty只能單一地監(jiān)聽已有屬性的修改或者變化，無法檢測到對象屬性的新增或刪除，而Proxy可以輕松實現(xiàn)；
• defineProperty無法監(jiān)聽屬性值是數(shù)組類型的變化，而Proxy可以輕松實現(xiàn)。

三、ref 和reactive的區(qū)別

• ref用于定義基本類型和引用類型，reactive僅用于定義引用類型；
• reactive只能用于定義引用數(shù)據(jù)類型的原因在于內(nèi)部是通過ES6的Proxy實現(xiàn)響應(yīng)式的，而Proxy不適用于基本數(shù)據(jù)類型；
• ref定義對象時，底層會通過reactive轉(zhuǎn)換成具有深層次的響應(yīng)式對象，所以ref本質(zhì)上是reactive的再封裝；
• 在JS中我們?nèi)绻?shù)據(jù)進(jìn)行操作，在ref定義的數(shù)據(jù)中，使用變量.value；訪問reactive不需要；
• 在定義數(shù)組時，建議使用ref，從而可避免reactive定義時值修改導(dǎo)致的響應(yīng)式丟失問題。

到此這篇關(guān)于Vue3 的ref和reactive的用法和區(qū)別的文章就介紹到這了,更多相關(guān)Vue3 ref和reactive區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論