Web1020/13.Vue3/project2/src/components/Demo4.vue

<template>
  <div>
    <h2>我叫{{obj.name}},今年{{obj.age}}</h2>
    <h2>我叫{{obj1.name}},今年{{obj1.age}}</h2>
    <button @click="changeMain">修改内容</button>
  </div>
</template>

<script setup name="Demo4">
import { ref, reactive} from 'vue'
/**
 * ref 
 * 修改数据时 需要添加.value
 * 1.基本数据类型
 * 2.引用数据类型
 * RefImpl
 * reactive
 * 1.引用数据类型
 * Proxy
 */
let obj = reactive({
    name:"小花",
    age:10
})
let obj1 = ref({
    name:"小花1",
    age:101
})
console.log(obj,'obj')
console.log(obj1,'obj1')
function changeMain() {
  obj1.value.name = '哇'
}
</script>
<style lang='scss' scoped>

</style>