第一种：不使用toRefs解构的，也就是在template中使用对象引用方式

<template>
    <div class="test-box">
        <p @click="changeText">{{ data.text }}</p>
        <p @click="changeArrs">{{ data.arrss }}</p>
    </div>
</template>

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

const data = reactive({
    text: "123",
    arrss: [
        { id: 1, text: "你" },
        { id: 2, text: "好" },
    ],
})
const changeText = () => {
    data.text = 321
}
const changeArrs = () => {
    // data.arrss.splice(1, 1)
    data.arrss.push({
        id:3,
        text:'啊'
    })
}
</script>

初始页面状态：

分别点击后

 第二种：使用toRefs解构的，也就是在template中直接使用定义好的变量名等等

<template>
    <div class="test-box">
        <p @click="changeText">{{ text }}</p>
        <p @click="changeArrs">{{ arrss }}</p>
    </div>
</template>

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

const data = reactive({
    text: "123",
    arrss: [
        { id: 1, text: "你" },
        { id: 2, text: "好" },
    ],
})

const changeText = () => {
    data.text = 321
}
const changeArrs = () => {
    // data.arrss.splice(1, 1)
    data.arrss.push({
        id:3,
        text:'哦'
    })
}
const { text,arrss } = toRefs(data)
</script>

 初始页面状态：

分别点击后：