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

<template>
  <div class="demo1">
    <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
    <button @click="changeName">修改名字</button>
    <button @click="changePerson">修改整体</button>
  </div>
</template>

<script setup>
// setup 中不允许使用this
import {ref} from 'vue';
// ref定义引用数据类型
let obj = ref({
  name: '喜羊羊',
  age: 3
})
console.log(obj,'ref')
function changeName() {
  obj.value.name = '懒羊羊'
}
function changePerson() {
  obj.value = {name:'12',age:10}
  // Object.assign(obj.value, {name:'1',age:10})
}
console.log(obj)
</script>

<style>

</style>