Vip4.0W/12.vue3/project1/src/components/Demo4.vue

<template>
  <div>
    <h1>Demo4</h1>
    <p>我叫{{ person.name }},今年{{ person.age }}岁</p>
    <h1>{{ aa }}</h1>
    <h1>{{ name }}--{{ age }}</h1>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script setup>
import {ref,reactive,toRefs,toRef} from "vue" 
// let [a,b,c] = [1,2,3]
let person = reactive({
    name:"图图",
    age: 3
})
/**
 * 使用toRefs/toRef 从数据中进行结构
 * 解构后的数据 具备响应式
 */
// let {name,age} = (person);
let aa = toRef(person,'name')
let {name,age} = toRefs(person);
console.log(name,age)
function changeName() {
    name.value = 'aa'
}
</script>

<style lang="scss" scoped>
</style>