2.Vue3.0-toRefs

Vue3.0-toRefs

<template>
  <div>
      <div>{{obj.name}}</div>
      <div>{{obj.gender}}</div>
      <div>{{name}}</div>
      <div>{{gender}}</div>
      <button @click="imformation">数据的更改</button>
  </div>
</template>

<script>
import {reactive,toRef, toRefs} from 'vue'
export default {
    name:'App',
    setup(){
        let obj = reactive({
            name:'张三丰',
            gender:'男',
        })
        let imformation =()=>{
            obj.name = "张无忌"
        }
        //使用toRefs的数据成为响应式数据，使用解构的方式会导致数据不是响应式对象
        //与原有的数据的值是关联的
        const obj3 = toRefs(obj)
        return {obj,...obj3,imformation}
    }
}
</script>

<style>

</style>