一思劳、定義數(shù)據(jù)角度:
ref定義:基本數(shù)據(jù)類型
reactive定義:對象(或數(shù)組)數(shù)據(jù)類型
備注:ref也可以用來定義對象和數(shù)組馍忽,它內(nèi)部通過reactive轉(zhuǎn)為代理對象
示例:
let p2 = ref({
? ? ? ? name: '李四',
? ? ? ? age: 18
? ? })
? ? console.log('p2',p2)
? ? let p1 = reactive({
? ? ? ? name: '張三',
? ? ? ? age: 20
? ? })
? ? console.log('p1',p1)
從打印的結(jié)果可以看出來通過ref定義的數(shù)組實(shí)際生成了一個引用實(shí)例對象棒坏,在js中如果需要調(diào)用對象的屬性值通過.value.name調(diào)用,而通過reactive定義的對象直接.name調(diào)用即可
二遭笋、原理角度
ref通過Object.defineProperty()的get()和set()實(shí)現(xiàn)響應(yīng)式(數(shù)據(jù)的劫持)
reactive通過Proxy實(shí)現(xiàn)響應(yīng)式坝冕,并通過Reflect操作源對象內(nèi)部的數(shù)據(jù)
三、使用角度
ref:操作數(shù)據(jù)需要通過.value瓦呼,在模版中讀取不需要通過.value
reactive : ?操作與讀取數(shù)據(jù)均不需要通過.value