掌握使用toRef函数转换响应式对象中的某个属性为单独响应式数据,并且值是关联的(注意:注意从响应式数据对象中解构出的属性数据,不再是响应式数据。 )

定义响应式数据:

• toRef是函数,转换响应式对象中某个属性为单独响应式数据,并且值是关联的。
  -toRef转换响应式数据包装成对象，value存在值的位置，需要修改的时候需要修改 toRef转换后的value属性值。

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

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

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

    // 2.模板中的值需要使用name数据，注意从响应式数据对象中解构出的属性数据,不再是响应式数据。
    // 3.使用toRef
      
    let name = toRef(obj,'name') //这里是使用了toRef取出响应式数据obj中name属性作为单独的响应式数据

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


   return {
       name,
       updateName
   }

  }  
   
}
</script>