建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)例子中代碼使用的單文件組件語法
企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)面向各種領(lǐng)域：展覽展示等成都網(wǎng)站設(shè)計、成都全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。
#reactive
返回對象的響應(yīng)式副本
const obj = reactive({ count: 0 })響應(yīng)式轉(zhuǎn)換是“深層”的——它影響所有嵌套 property。在基于 ES2015 Proxy 的實現(xiàn)中，返回的代理是不等于原始對象。建議只使用響應(yīng)式代理，避免依賴原始對象。
類型聲明：
function reactive(target: T): UnwrapNestedRefs #readonly
獲取一個對象 (響應(yīng)式或純對象) 或 ref 并返回原始代理的只讀代理。只讀代理是深層的：訪問的任何嵌套 property 也是只讀的。
const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
// 適用于響應(yīng)性追蹤
console.log(copy.count)
})
// 變更original 會觸發(fā)偵聽器依賴副本
original.count++
// 變更副本將失敗并導(dǎo)致警告
copy.count++ // 警告!#isProxy
檢查對象是 reactive 還是 readonly創(chuàng)建的代理
#isReactive
檢查對象是否是 reactive創(chuàng)建的響應(yīng)式 proxy。
import { reactive, isReactive } from 'Vue'
export default {
setup() {
const state = reactive({
name: 'John'
})
console.log(isReactive(state)) // -> true
}
} 如果 proxy 是 readonly 創(chuàng)建的，但還包裝了由 reactive 創(chuàng)建的另一個 proxy，它也會返回 true。
import { reactive, isReactive, readonly } from 'vue'
export default {
setup() {
const state = reactive({
name: 'John'
})
// 從普通對象創(chuàng)建的只讀代理
const plain = readonly({
name: 'Mary'
})
console.log(isReactive(plain)) // -> false
// 從響應(yīng)式代理創(chuàng)建的只讀代理
const stateCopy = readonly(state)
console.log(isReactive(stateCopy)) // -> true
}
}#isReadonly
檢查對象是否是由readonly創(chuàng)建的只讀代理。
#toRaw
返回 reactive 或 readonly 代理的原始對象。這是一個轉(zhuǎn)義口，可用于臨時讀取而不會引起代理訪問/跟蹤開銷，也可用于寫入而不會觸發(fā)更改。不建議保留對原始對象的持久引用。請謹慎使用。
const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true#markRaw
標(biāo)記一個對象，使其永遠不會轉(zhuǎn)換為代理。返回對象本身。
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false
// 嵌套在其他響應(yīng)式對象中時也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // falseWARNING
下方的 markRaw 和 shallowXXX API 使你可以有選擇地選擇退出默認的深度響應(yīng)式/只讀轉(zhuǎn)換，并將原始的，非代理的對象嵌入狀態(tài)圖中。它們可以在各種情況下使用：
- 有些值不應(yīng)被設(shè)置為響應(yīng)式的，例如復(fù)雜的第三方類實例或 Vue 組件對象。
- 當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時，跳過代理轉(zhuǎn)換可以提高性能。
它們被認為是高階的，因為原始選擇退出僅在根級別，因此，如果將嵌套的、未標(biāo)記的原始對象設(shè)置為響應(yīng)式對象，然后再次訪問它，則可以得到代理版本。這可能會導(dǎo)致本源危害——即執(zhí)行依賴于對象本身但同時使用同一對象的原始版本和代理版本的操作：
const foo = markRaw({
nested: {}
})
const bar = reactive({
// 雖然 `foo` 被標(biāo)記為原始，foo.nested 不是。
nested: foo.nested
})
console.log(foo.nested === bar.nested) // false本源危害通常很少見。然而，為了在安全地避免本源危害的同時正確地使用這些 API，需要對響應(yīng)性系統(tǒng)的工作原理有一個堅實的理解。
#shallowReactive
創(chuàng)建一個響應(yīng)式代理，該代理跟蹤其自身 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)建一個代理，使其自身的 property 為只讀，但不執(zhí)行嵌套對象的深度只讀轉(zhuǎn)換 (暴露原始值)。
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 改變狀態(tài)本身的property將失敗
state.foo++
// ...但適用于嵌套對象
isReadonly(state.nested) // false
state.nested.bar++ // 適用本文標(biāo)題：創(chuàng)新互聯(lián)VUE3教程：Vue 3.0 響應(yīng)性基礎(chǔ) API
URL分享：http://m.fisionsoft.com.cn/article/djcpphg.html
