vue3中reactive怎么查看数据

在Vue 3中使用`reactive`函数创建响应式对象后，可以通过`console.log`等方式输出对象的值来查看数据。

例如，假设有如下代码：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello World'
})

console.log(state)

可以通过`console.log`输出`state`对象的值，来查看当前响应式对象的状态。

另外，也可以在Vue组件模板中使用插值表达式`{{ }}`或`v-bind`指令来动态绑定响应式对象的属性值，从而实时查看数据。

例如，假设有如下代码：

<template>
  <div>
    <p>{{ state.count }}</p>
    <p>{{ state.message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello World'
    })

    return {
      state
    }
  }
}
</script>

可以在模板中使用插值表达式`{{ state.count }}`和`{{ state.message }}`分别绑定响应式对象的`count`和`message`属性值，从而实时查看数据的变化。