vue3中toRef和toRefs,shallowRef和shallowReactive
toRef:创建一个ref对象,其value值指向对象的某个属性
语法:
const name = toRef(person,'name')
toRefs:作用同toRef,可以同时创建多个ref对象
应用:要将响应式对象中的某个属性单独给外部使用时
使用:
1.在页面中引入
import {reactive, ref, toRef,toRefs} from 'vue'
2.在setup里使用,也可以在return里面使用
setup(){ let sum = ref(0) let msg = ref('hello boys') let person = reactive({ name:'章三', age:18, job:{ j1:{ salary:20 } } }) return { test, sum, msg, person, name:toRef(person,'name'), //展开person对象,在页面里使用不再写person.xx,可以直接写xx ...toRefs(person) } }
shallowRef和shallowReactive
shallowRef:只处理基本数据类型的响应式,不处理对象类型的响应式
shallowReactive:只处理最外层的属性的响应式,如上面的person.job.j1就不是响应式数据,person.name还是响应式