3.vue3之toRef系列

念念不忘可有回响

1. toRef()

只能修改响应式对象的值, 非响应式的视图不会发送变化

可以把对象中的某个属性单独截取出来

const list = reactive({name: '百里',age: 17, like: '狙击'})
const like = toRef(list,'name')

2. toRefs()

当我们相对reactive对象进行解构的时候, 如果直接解构, 返回的结果就不在是一个响应式的

<button @click=change>修改</button>

let list = reactive({name: '百里',age: 17, like: '狙击'})

let { name, age , like} = list
const change = () => {
  console.log(name, age , like);  //  百里 17 狙击
}

// 如果想要是响应式的只需要
let { name, age , like} =toRefs(list) 
// 所以在我们想要对reactive对象进行解构的时候, 要用上toRefs

3. toRaw()

如果我们想把一个reactive对象变为非响应式的可以用到

const change = () => {
  console.log(list,toRaw(list));  // list就变为了普通对象
}