reactive()
返回对象的响应式代理。
类型
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
细节
响应式转换是“深度”的:它影响所有嵌套属性。响应式对象还可以在保持响应性的同时深入解开任何作为refs的属性。
还应该注意的是,当引用作为响应数组的元素或本机集合类型(如 Map)
为避免深度转换并仅在根级别保留响应性,请改用shallowReactive()
。
返回的对象及其嵌套对象被 ES Proxy 包裹,不等于原始对象。建议只使用响应式代理并避免依赖原始对象。
例子
创建一个响应对象:
const obj = reactive({ count: 0 }) obj.count++
参考展开:
const count = ref(1) const obj = reactive({ count }) // ref will be unwrapped console.log(obj.count === count.value) // true // it will update `obj.count` count.value++ console.log(count.value) // 2 console.log(obj.count) // 2 // it will also update `count` ref obj.count++ console.log(obj.count) // 3 console.log(count.value) // 3
请注意,当作为数组或集合元素访问时,refs不会被解包:
const books = reactive([ref('Vue 3 Guide')]) // need .value here console.log(books[0].value) const map = reactive(new Map([['count', ref(0)]])) // need .value here console.log(map.get('count').value)
将ref分配给reactive
属性时,该ref也将自动展开:
const count = ref(1) const obj = reactive({}) obj.count = count console.log(obj.count) // 1 console.log(obj.count === count.value) // true