您好,登錄后才能下訂單哦!
這篇“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”文章吧。
響應(yīng)性基礎(chǔ) API
reactive
為什么有這個(gè)屬性了,其實(shí)我猜測是為了滿足不同團(tuán)隊(duì)的寫代碼風(fēng)格,因?yàn)橛械膱F(tuán)隊(duì)可能喜歡如下方式:
const x = 10;
const y = 20;
有的團(tuán)隊(duì)則喜歡這種方式:
const obj = {
x: 10,
y: 20
}
而 reactive 則是為了滿足第二種情況的團(tuán)隊(duì),返回對象的響應(yīng)式副本,響應(yīng)式轉(zhuǎn)換是深層的,它會(huì)影響對象的屬性,返回的 proxy 是不等于原始對象的,所以我們建議使用 proxy ,避免依賴原始對象。
<template>
<div>
<p>x --- {{obj.x}}</p>
<p>y --- {{obj.y}}</p>
</div>
</template>
<script>
import {
reactive,
} from 'vue'
export default {
setup() {
const obj = reactive({
x: 10,
y: 20
})
return {
obj
}
},
}
</script>
readonly
根據(jù)英文單詞的字面就知道這個(gè)方法代表只讀,可以將一個(gè)原始的對象,或者是響應(yīng)式對象,或者是 ref 返回的副本對象,我們知道響應(yīng)式轉(zhuǎn)換是深層的,會(huì)影響到深層屬性,所以對象的任何屬性都是只讀的:
<template>
<div>
<p>x --- {{obj.x}}</p>
<p>y --- {{obj.y}}</p>
</div>
</template>
<script>
import {
reactive,
readonly,
watchEffect
} from 'vue'
export default {
setup() {
const obj = reactive({
x: 10,
y: 20
})
const readonlyObj = readonly(obj)
watchEffect(() => {
console.log("用于追蹤 obj", obj.x)
})
obj.x++ // 會(huì)進(jìn)行加法運(yùn)算
readonlyObj.x++ // 發(fā)生警告
return {
obj
}
},
}
</script>
isProxy
用于檢測對象是否被 reactive 或者readonly 創(chuàng)建的 proxy
<template>
<div>
<p>x --- {{obj.x}}</p>
<p>y --- {{obj.y}}</p>
</div>
</template>
<script>
import {
reactive,
readonly,
watchEffect,
isProxy,
isReactive,
isReadonly
} from 'vue'
export default {
setup() {
const obj = reactive({
x: 10,
y: 20
})
const readonlyObj = readonly(obj)
watchEffect(() => {
console.log("用于追蹤 obj", obj.x)
})
console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))
console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))
console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))
obj.x++ // 會(huì)進(jìn)行加法運(yùn)算
readonlyObj.x++ // 發(fā)生警告
return {
obj
}
},
}
</script>
isReactive
檢測對象是否是 reactive 創(chuàng)建的響應(yīng)式對象:
<template>
<div>
<p>x --- {{obj.x}}</p>
<p>y --- {{obj.y}}</p>
</div>
</template>
<script>
import {
reactive,
readonly,
watchEffect,
isProxy,
isReactive,
isReadonly
} from 'vue'
export default {
setup() {
const obj = reactive({
x: 10,
y: 20
})
const readonlyObj = readonly(obj)
watchEffect(() => {
console.log("用于追蹤 obj", obj.x)
})
console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))
console.log("isProxy(obj)", isProxy(obj), isProxy(readonlyObj))
console.log("isReactive(obj)", isReactive(obj), isReactive(readonlyObj))
obj.x++ // 會(huì)進(jìn)行加法運(yùn)算
readonlyObj.x++ // 發(fā)生警告
return {
obj
}
},
}
</script>
isReadonly
檢測對象是否是 readonly 創(chuàng)建的只讀對象:
console.log("isReadonly(obj)",isReadonly(obj), isReadonly(readonlyObj))
toRaw
返回 reactive 或者 readonly proxy 的原始對象,
const xt = {}
const xy = reactive(xt)
console.log("toRaw===>", toRaw(xy) == xt) // true
markRaw
標(biāo)記一個(gè)對象,使其永遠(yuǎn)不會(huì)轉(zhuǎn)換為 proxy 響應(yīng)式對象:
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
shallowReactive
創(chuàng)建一個(gè)響應(yīng)式 proxy,跟蹤其自身 property 的響應(yīng)性,但不執(zhí)行嵌套對象的深度響應(yīng)式轉(zhuǎn)換 (暴露原始值)。
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 改變狀態(tài)本身的性質(zhì)是響應(yīng)式的
state.foo++
// ...但是不轉(zhuǎn)換嵌套對象
isReactive(state.nested) // false
state.nested.bar++ // 非響應(yīng)式
shallowReadonly
創(chuàng)建一個(gè) proxy,使其自身的 property 為只讀,但不執(zhí)行嵌套對象的深度只讀轉(zhuǎn)換 (暴露原始值)。
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 改變狀態(tài)本身的property將失敗
state.foo++
// ...但適用于嵌套對象
isReadonly(state.nested) // false
state.nested.bar++ // 適用
以上就是關(guān)于“Vue3響應(yīng)性基礎(chǔ)API實(shí)例分析”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。