reactive的用法，区别

<template>
  <div>
    <div><span>count is {{ count }}</span></div>
    <div><button @click="instrement">instrement</button></div>
 
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = 
console.log(count.state) // 0

//count.value++
//console.log(count.value) // 1

const instrement = () => { count.value++ }
console.log(count.value++)
</script>

以上是错误代码
现在是正确代码

<template>
  <div>
    <div><span>count is {{ state.count }}</span></div>
    <div><button @click="instrement">instrement</button></div>
 
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})

state.count++
console.log(state.count) // 0


const instrement = () => { state.count++ }
console.log(state.count++)
</script>

count为1，不为2的情况；
还有count为0，不为1的情况。

<template>
  <div>
    <div><span>count is {{ state.count }}</span></div>
    <div><button @click="instrement">instrement</button></div>
 
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})

//state.count++
//console.log(state.count) // 0


const instrement = () => { state.count++ }
console.log(state.count++)
</script>