Vip4.0W/12.vue3/project1/src/components/Demo2.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 {reactive} from 'vue';
// reactive定义引用数据类型
let obj = reactive({
  name: '喜羊羊',
  age: 3
})
function changeName() {
  obj.name = '懒羊羊'
}
function changePerson() {
  // obj = {name:'1',age:10}
  Object.assign(obj, {name:'1',age:10})
}
console.log(obj,'reactive')
</script>

<style>

</style>