一,前言
1.相对于ref
和reactive
,shallowRef
和shallowReactive
创建的数据是浅响应式的
二,shallowRef
介绍
1.shallowRef
可以创建一个跟踪自身 .value
变化的 ref
,但不会使其值也变成响应式的
2.当使用shallowRef
为一个基础类型数据创建响应性时,行为是和ref
一样的。
3.不同的是,当使用shallowRef
为复杂类型创建响应性时,修改深层属性,不具备响应性
const a = shallowRef({b:1})
a.value.b = 2 //视图不会更新
console.log(a.value) //{b : 2} 但是能追踪到值得变化
a.value={b:2} //一整个替换时,视图会变化
三,shallowReactive
介绍
1.创建一个响应式代理,它跟踪其自身 property
的响应性,但不执行嵌套对象的深层响应式转换 (暴露原始值)
2.相对于reactive
,shallowReactive
只有最外层的属性是响应的
const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})
// 改变 state 本身的性质是响应式的
state.foo++
// ...但是不转换嵌套对象
isReactive(state.nested) // false
state.nested.bar++ // 非响应式