vue3 ref及reactive 函数用法区别

<template>
	<el-button @click="changeMyCount" size="mini">加1</el-button>
	<span>num:{{num}}</span>
	<br>
	<br>
	<el-button @click="state.show = !state.show" size="mini">transition</el-button>
	<el-collapse-transition>
		<div v-show="state.show">
			<div class="transition-box">el-collapse-transition</div>
			<div class="transition-box">el-collapse-transition</div>
		</div>
	</el-collapse-transition>
</template>

<script setup>
	// ref用于创建一个响应式数据，仅仅能监听基本类型的变化，不能监听复杂类型的变化；
	// reactive也是将数据变成响应式数据，用于复杂类型数据，例如对象和数组；
	import {
		defineProps,
		reactive,
		ref
	} from 'vue'

	defineProps({
		msg: String
	})

	const state = reactive({
		count: 0,
		show: true
	})

	const num = ref(2)
	const changeMyCount = () => {
		num.value = num.value + 1 //number类型需要.value
	}
</script>

<style scoped>
	.transition-box {
		width: 200px;
		height: 30px;
		background-color: cornflowerblue;
		margin: 5px 0;
		line-height: 30px;
		border-radius: 5px;
		text-align: center;
	}
</style>