炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue3 API] – 响应性基础 API

# 响应性基础 API

本节例子中代码使用的单文件组件语法

# reactive

返回对象的响应式副本

const obj = reactive({ count: 0 })

响应式转换是“深层”的——它影响所有嵌套 property。在基于 ES2015 Proxy 的实现中,返回的 proxy 是等于原始对象的。建议只使用响应式 proxy,避免依赖原始对象。

类型声明:

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

# readonly

获取一个对象 (响应式或纯对象) 或 ref 并返回原始 proxy 的只读 proxy。只读 proxy 是深层的:访问的任何嵌套 property 也是只读的。

const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
// 适用于响应性追踪
console.log(copy.count)
})
// 变更original 会触发侦听器依赖副本
original.count++
// 变更副本将失败并导致警告
copy.count++ // 警告!

# isProxy

检查对象是否是由 reactivereadonly 创建的 proxy。

# isReactive

检查对象是否是 reactive创建的响应式 proxy。

import { reactive, isReactive } from 'vue'
export default {
setup() {
const state = reactive({
name: 'John'
})
console.log(isReactive(state)) // -> true
}
}

如果 proxy 是 readonly 创建的,但还包装了由 reactive 创建的另一个 proxy,它也会返回 true

 
 
 
 
 
 
 
 
 

import { reactive, isReactive, readonly } from 'vue'
export default {
setup() {
const state = reactive({
name: 'John'
})
// 从普通对象创建的只读 proxy
const plain = readonly({
name: 'Mary'
})
console.log(isReactive(plain)) // -> false
// 从响应式 proxy 创建的只读 proxy
const stateCopy = readonly(state)
console.log(isReactive(stateCopy)) // -> true
}
}

# isReadonly

检查对象是否是由readonly创建的只读 proxy。

# toRaw

返回 reactivereadonly proxy 的原始对象。这是一个转义口,可用于临时读取而不会引起 proxy 访问/跟踪开销,也可用于写入而不会触发更改。不建议保留对原始对象的持久引用。请谨慎使用。

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

WARNING

下方的 markRaw 和 shallowXXX API 使你可以有选择地选择退出默认的深度响应式/只读转换,并将原始的,非 proxy 的对象嵌入状态图中。它们可以在各种情况下使用:

  • 有些值不应被设置为响应式的,例如复杂的第三方类实例或 Vue 组件对象。
  • 当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。

它们被认为是高阶的,因为原始选择退出仅在根级别,因此,如果将嵌套的、未标记的原始对象设置为响应式对象,然后再次访问它,则可以得到 proxy 版本。这可能会导致本源危害——即执行依赖于对象本身但同时使用同一对象的原始版本和 proxy 版本的操作:

const foo = markRaw({
nested: {}
})
const bar = reactive({
// 虽然 `foo` 被标记为原始,foo.nested 不是。
nested: foo.nested
})
console.log(foo.nested === bar.nested) // false

本源危害通常很少见。然而,为了在安全地避免本源危害的同时正确地使用这些 API,需要对响应性系统的工作原理有一个坚实的理解。

# shallowReactive

创建一个响应式 proxy,跟踪其自身 property 的响应性,但不执行嵌套对象的深度响应式转换 (暴露原始值)。

const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 改变状态本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式

# shallowReadonly

创建一个 proxy,使其自身的 property 为只读,但不执行嵌套对象的深度只读转换 (暴露原始值)。

const state = shallowReadonly({
foo: 1,
nested: {
bar: 2
}
})
// 改变状态本身的property将失败
state.foo++
// ...但适用于嵌套对象
isReadonly(state.nested) // false
state.nested.bar++ // 适用

炫意HTML5 » [Vue3 API] – 响应性基础 API

CSS3教程HTML5教程