vue3的ref、reactive的使用

<template>
  <p>{{ person.name }}</p>
  <p>{{ person.long }}</p>
  
  <p>{{ age }}</p>
  <p>{{ info.address }}</p>
  <span @click="changePerson">点击换人啦</span>
</template>

<script setup>
import { ref, reactive } from 'vue';


let person = reactive({
  name: 'Dog Ming',
  long: 18
});

let age = ref(18); // 基本数据类型

let info = ref({
  address: 'huizhou'
});


const changePerson = () => {
    person.name = 'Along';
    person.long = 10;
    
    age.value = 19;
    info.value.address = 'shenzhen';
}

</script>