VIP32/vue3/晚课/my_project/src/components/Demo5.vue

<template>
    <div class="demo5">
        <h3>用户一：{{obj.aa}}</h3>
        <h3>用户二：{{obj.bb}}</h3>
        <button @click="changeUser">修改用户一</button>
    </div>
</template>

/**
    ref 可以修改基本数据类型 也可以修改引用数据类型
    走的是Object.defineProperty中的getter和setter劫持数据并修改数据
    ref 修改浅层的引用数据类型
    reactive 只能修改引用数据类型
    走的是es6中的proxy代理数据
    reactive 修改深层的引用数据类型
*/
<script lang="ts" setup name="Demo5">
import {ref,reactive} from 'vue';
let obj = ref({
    aa: "图图",
    bb: "海绵宝宝"
})
let bb = reactive({
    a:"1",
    b:"2"
})
let dd = {
    a:{
        b:{
            c:{
                d:111
            }
        }
    }
}
console.log(bb);
let a = ref(1);
console.log(a);
console.log(obj);
function changeUser() {
    obj.value.aa = '哆啦A梦'
}
</script>

<style>

</style>