掌握使用toRefs 数据定义转换响应式中所有属性为响应式数据,通常运用于结构|展开reactive定义对象(toRef是一个属性，这是所有属性)

定义响应式数据

• toRefs是函数,转换响应式对象中所有属性为单独响应式的数据,对象成为普通对象。

使用场景:剥离响应式对象(不想通过对象点去取属性,结构或者展开响应式对象),想使用响应式对象中对个或者所有属性作为响应式数据。

<template>
 <div class="toRefs">
     {{name}}
 </div>
 <button @click="updateName">更新名字</button>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default { 
name:'reactive',
setup(){
  // 1. reactive 定义响应式数据

  const  obj = reactive({
       name:'Ls',
       age:18
  })

  // 2.模板中的值需要使用name数据，注意从响应式数据对象中解构出的属性数据,不再是响应式数据。
  // 这两种方式解构粗来的都不是响应式数据了
  //const  {name,age} = obj;
  //const  obj2 = {...obj}

  // 3.使用toRefs,把响应式obj里面的属性都解构成响应式的
  const {name} = toRefs(obj)
   
    console.log(name)

 //  console.log(name) //这是一个响应式对象
  const updateName = ()=>{
     console.log('updateName')
     name.value = 'ankouyang' //如果需要修改，则需要修改里面的value
  }


 return {
     name,
     updateName
 }

}  
 
}
</script>