vue3中使用ref函数代替响应式data

<script setup>

import { ref } from 'vue';

const state = ref({

count:0

})

const setState = ()=>{

state.value.count++

}

const count = ref(0)

const setCount = ()=>{

count.value++

}

</script>

<template>

<div>

<button @click="setState"> {{ state.count }} </button>

<button @click="setCount"> {{ count }} </button>

</div>

</template>

使用ref的时候必须使用.value.

如果reactive函数，则该函数只支持传递对象。

ref则两个都能传递。