4、toRefs

<template>
  <div class="app">
    <div>我的金钱：{{ money }}</div>
    <div>{{ car.brand }} --- {{ car.price }}</div>
    <div>{{ name }}</div>
    <button @click="money++">修改</button>
    <button @click="name = 'ls'">修改</button>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
export default {
  setup() {
    // 1. toRefs
    // const money = ref(100)
    // const car = reactive({
    //   brand: '宝马',
    //   price: 1000000
    // })
    // const name = ref('zs')

    const state = reactive({
      money: 100,
      car: {
        brand: '宝马',
        price: 1000000
      },
      name: 'zs'
    })

    return {
      // money,
      // car,
      // name
      ...toRefs(state) //ES6扩展运算符，会取消双向数据绑定的特性,使用toRefs(),转为响应式数据
    }
  }
}
</script>

<style></style>