refreactive vue3

ref

可以定义:基本类型、对象类型的响应式数据

reactive

只能定义:对象类型的响应式数据

<template><div class="person"><h2>Name: {{ name }}</h2><h2>Age: {{ age }}</h2><h2>Tel: {{ tel }}</h2><button @click="changeName">changeName</button><button @click="changeAge">age++</button><button @click="showTel">tel</button><h2>Car's price: {{ car.price }}</h2><button @click="changePrice">price++</button><h2>Country list: </h2><ul><li v-for="c in countries" :key="c.name">{{ c.name }}</li></ul><button @click="change1Country">change one country</button></div>
</template><script lang="ts" setup name = "Person">import { ref, reactive } from 'vue'//datalet name = ref('Jack')let age = ref(19)let tel = '123456'let car = reactive ({brand:'Volve', price:100})let countries = reactive([{name:'CN', continent:'Asia'},{name:'JP', continent:'Asia'},{name:'US', continent:'North America'}])//functionfunction changeName() {name.value = 'Tom'}function changeAge() {age.value += 1}function showTel() {alert(tel)}function changePrice() {car.price += 1}function change1Country() {countries[2].name = 'Canada'}</script><style scoped>/* 可以添加样式 */
</style>