簡單談談Vue3中的ref和reactive

Posted on by

一、是什麼？

ref和reactive是Vue3中用來實現數據響應式的API

一般情況下，ref定義基本數據類型，reactive定義引用數據類型

（我喜歡用它來定義對象，不用它定義數組，原因後面講）

我理解的ref本質上是reactive的再封裝

二、先聊reactive

reactive定義引用數據類型（以對象和數組舉例），它能夠將復雜數據類型的內部屬性或者數據項聲明為響應式數據，所以reactive的響應式是深層次的，其底層是通過ES6的Proxy來實現數據響應式，相對於Vue2的Object.defineProperty，具有能監聽增刪操作，能監聽對象屬性的變化等優點

使用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定義響應式數據時，若數據不是對象類型直接就返回瞭，就不會進行後續的數據響應式處理瞭，這也就是我隻用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
}

五、對比總結

  1. ref用於定義基本類型和引用類型，reactive僅用於定義引用類型
  2. reactive隻能用於定義引用數據類型的原因在於內部是通過ES6的Proxy實現響應式的，而Proxy不適用於基本數據類型
  3. ref定義對象時，底層會通過reactive轉換成具有深層次的響應式對象，所以ref本質上是reactive的再封裝
  4. 在腳本裡使用ref定義的數據時，記得加.value後綴
  5. 在定義數組時，建議使用ref，從而可避免reactive定義時值修改導致的響應式丟失問題

總結

到此這篇關於簡單談談Vue3中ref和reactive的文章就介紹到這瞭,更多相關Vue3中ref和reactive內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：