toRefs 和 toRef的使用

<template>
  <div>
    默认 : {{data.name}} - {{data.age}} - {{data.hight}}
    <br>
    解构 : {{name}} - {{age}} - {{hight}}
    <br>
    <button @click="age++,hight++">改变</button>
  </div>
</template>

<script>

import {reactive, toRefs , toRef} from 'vue'
export default {
  setup(){
    const data = reactive({
      name:'吴宇腾',
      age:39,
      hight:1.88
    })

    // toRefs 解构后,使name,age都具备响应式
    const {name,age} = toRefs(data)

    // toRef 单独解构一个
    const hight = toRef(data,'hight')

    return {
      data,
      name,
      age,
      hight
    }
  }
}
</script>