toRaw
- 返回
reactive
或readonly
代理的原始对象。
这是一个“逃生舱”,可用于临时读取数据而无需承担代理访问/跟踪的开销,也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。
const foo = {
}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true
markRaw
- 标记一个对象,使其永远不会转换为 proxy。返回对象本身。
const foo = markRaw({
})
console.log(isReactive(reactive(foo))) // false
// 嵌套在其他响应式对象中时也可以使用
const bar = reactive({
foo })
console.log(isReactive(bar.foo)) // false
shallowReactive
- 创建一个响应式代理,它跟踪其自身 property 的响应性,但不执行嵌套对象的深层响应式转换 (暴露原始值)。
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式
- 与
reactive
不同,任何使用ref
的property
都不会被代理自动解包。
const state = shallowReactive({
count: ref(0)
})
console.log('state.count :>> ', state.count); // RefImpl
console.log('state.count.value :>> ', state.count.value); // 0
shallowReadonly
创建一个 proxy,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。
const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 改变 state 本身的 property 将失败
state.foo++
// ...但适用于嵌套对象
isReadonly(state.nested) // false
state.nested.bar++ // 适用
与 readonly 不同,任何使用 ref 的 property 都不会被代理自动解包