站長(zhǎng)資訊網(wǎng)
相對(duì)于Vue2的defineProperty實(shí)現(xiàn)的數(shù)據(jù)響應(yīng)式，Vue3對(duì)數(shù)據(jù)響應(yīng)的處理分工更加明確，通過(guò)組合式api中ref與reactive兩個(gè)暴露給開(kāi)發(fā)者的函數(shù)對(duì)數(shù)據(jù)進(jìn)行包裝，從而實(shí)現(xiàn)了數(shù)據(jù)響應(yīng)式，那么它們有什么區(qū)別？下面我們一起來(lái)根據(jù)例子來(lái)學(xué)習(xí)！
ref：定義基本數(shù)據(jù)類(lèi)型、引用數(shù)據(jù)類(lèi)型的響應(yīng)式。也就是說(shuō)ref(value)，這個(gè)value類(lèi)型可以是基本數(shù)據(jù)類(lèi)型，也可以是引用數(shù)據(jù)類(lèi)型，但是在js中使用時(shí)必須以屬性.value格式使用，在template中可以直接調(diào)用數(shù)據(jù)。
<template> <div> <div><button @click="changeValue">修改</button></div> <div> <p>當(dāng)前strRef：{{ strRef }}</p> <p>當(dāng)前objRef：姓名：{{ objRef.name }} 愛(ài)好：{{ objRef.hobboy }}</p> <p>當(dāng)前arrRef：{{ arrRef }}</p> </div> </div> </template> <script> import { defineComponent, ref, shallowRef } from 'vue' export default defineComponent({ setup () { const strRef = ref('sapper');// 基本數(shù)據(jù)類(lèi)型 const arrRef = ref([1, 3, 2]);// 數(shù)組類(lèi)型 const objRef = ref({ // 對(duì)象類(lèi)型 name: 'sapper', hobboy: ['吉他', '原神'] }) const changeValue = () => { strRef.value = '工兵'; arrRef.value[1] = 4; objRef.value.hobboy[1] = '滑冰'; } return {strRef,objRef,arrRef,changeValue} } }) </script>
登錄后復(fù)制
reactive：定義引用類(lèi)型數(shù)據(jù)的響應(yīng)式，不支持基本數(shù)據(jù)類(lèi)型，如果需要寫(xiě)基本數(shù)據(jù)類(lèi)型只能是放在對(duì)象中，也就是說(shuō)reactive(value)，這個(gè)value類(lèi)型必須是引用類(lèi)型?！?/p>
