toRef
生成reactive对象的某个属性的ref, 这样可以在模板总只写简短的属性名, 而且是响应式的.
处理一个对象的一个属性
toRef存在引用关系, 改变时会改变源数据
格式
toRef(对象,'对象的某个属性')
返回该对象这个属性的引用
toRefs
处理一个对象的多个属性
返回一个对象(包含对象的所有属性)
实例 – toRef
setup内的返回值
setup() {
let person = reactive({
name: "李四",
age: 18,
job: {
salary: 10,
},
});
return {
name: toRef(person, "name"),
age: toRef(person, "age"),
salary: toRef(person.job, "salary"),
person,
};
},
改进实例 – toRefs √
setup() {
let person = reactive({
name: "李四",
age: 18,
job: {
salary: 10,
},
});
return {
...toRefs(person),
...toRefs(person.job),
person,
};
},
总结
浅响应 shallowReactive (了解)
只对对象的第一层属性进行响应式
shallowRef (了解)
不求人, 不调用reactive进行对象响应式
ref 会请 reactive 帮忙
总结
readonly和shallowReadonly
不让改 和 不让改第一层
用法: 将别人的数据拿过来用, 设置为只读
toRaw和markRaw(后一个用的更多)
原始 raw
toRaw(响应式数据)
返回把响应式数据Proxy.target
markRaw则直接让非响应式(target)不能被改成响应式数据,
也就是可以改,但是不会渲染
总结
customRef
指定延迟显示时间,防抖