V3-toRef,toRefs,toRaw 相关

toRef(obj, objKey)

reactive数据类型中的单个属性解析为响应式,即：ref（非响应式数据，没用）

const obj = reactive({
  name: 'Lyon',
  age: 18
})
const nameRef = toRef(obj, 'name') // 单个属性解析为响应式数据
const clickBtn = () => {
  nameRef.value = 'LLL'
}

toRefs(对象)

reactive数据类型多个属性解析为响应式,即：ref（非响应式数据，没用）

底层循环解析属性，逐个转换

const { name, age } = toRefs(obj)
const clickBtn = () => {
  name.value = 'toRefs复制'
  age.value = 88
}

toRaw 将响应式数据 解包为 原始数据

const obj = reactive({
  name: 'Lyon'
})
console.log(obj)
const noXY = toRaw(obj) // 转化为 原始数据

const clickBtn = () => {
  noXY.name = '操作原始数据'
  console.log(noXY) // {name: '操作原始数据'} 数据变化了，页面无变化，
}