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>