vue3 响应式学习
ref
const a = ref({ a: 1 });
const b = ref("b");
- ref 接收一个值作为参数，返回一个响应式的对象.可以通过.value 进行更改。
如上图:
- 当参数是个基本类型时:value 是个基本类型
- 当参数是对象时:底层会通过reactive将 value 包一层返回一个具有深层次响应式的 proxy 对象
- 如果你不希望你的 ref 使用的是对象被深层处理那么可以使用shallowRef()代替，这样当你的类型是个对象时就会只对对象本身的变化才具有响应式(也就是当改变对象的地址时才会触发双向绑定从而更新页面)
reactive
let a = reactive({ a: 1 });
- reactive 接收一个对象作为参数，返回一个具有深层次响应式的 proxy 对象
- 假如你让 reactive 接收一个基本类型，那么她将会失去响应式。
- 和 ref 一样 reactive 也有一个只作用于浅层属性的 shallowReactive,shallowReactive 只对浅层属性具有响应式,深层的属性会丢失响应式。
tips:当ref不为数组和Map时,将它赋值给reactive,它将自动解包
{{ obj.count === count }}:为 true,说明指向的引用地址是同一个。
readonly
const a = reactive({ a: 0 });
const b = readonly(a);
b.a++
- readonly 接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。
- b.a++:更改该只读副本将会失败，并会得到一个警告
[Vue warn] Set operation on key "a" failed: target is readonly - 和 ref、reactive 一样也有避免深层转换行为,** shallowReadonly()**:只有根级的属性变为了只读
响应式检查工具函数
isRef
const a = reactive({ a: 0 });
console.log(isRef(a)); //false
- isRef:检查某个值是否为 ref
unref
const a = reactive({ a: 0 });
const b = ref({ b: 1 });
console.log(unref(a) === a, unref(b) === b.value); //true true
- unref:类似于 val = isRef(val) ? val.value : val 这样的一个语法糖
toRef
const a = reactive({ a: 0 });
console.log(toRef(1), toRef(a).value === a); // RefImpl true
- toRef:将可以将值、reactive 等转成 ref
toValue
const a = reactive({ a: 0 });
const b = ref(1);
console.log(toValue(a), toValue(b)); //proxy{a} 1
- toValue:将值、ref 或 reactive 等转成值
toRefs
const c = reactive({ c1: 1, d: { f: 2 } });
const { c1, d } = toRefs(c);
- toRefs:能将一个响应式对象转换为一个ObjectRefImpl对象,ObjectRefImpl对象依然具有响应式,常用来解构响应式对象
