Vue3 ref() reactive() 声明响应式状态

ref函数 使用ref函数将普通数据变成响应式数据

reactive函数 把对象和数组这类复合数据类型数据变成响应式数据

<template>
	<span>
		<span id="num">{{num}}</span>
		<input type="button" value="+1" @click="f1">

		<ul>
			<li v-for="(item,i) in stuList" :key="i">
				{{item.id}} -- {{item.name}}
			</li>
		</ul>
		<button @click="addStu">addStu</button>
	</span>
</template>

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

	var num = ref(10)
	var stuList = reactive([{
		id: 1,
		name: "name1"
	}, {
		id: 2,
		name: "name2"
	}, {
		id: 3,
		name: "name3"
	}])

	function f1() {
		num.value++
		console.log(num.value)
	}

	function addStu() {
		stuList.push({
			id: stuList.length + 1,
			name: "name" + (stuList.length + 1)
		})
	}
</script>