Vue3响应式API---reactive()示例

用create-vue创建了一个Vue3工程：

App.vue文件的内容如下：

<script setup>
// 首先从vue中导入reactive函数
import { reactive } from 'vue'

// 执行reactive函数，传入一个对象类型的参数，用变量接收
// reactive函数将一个普通的javascript对象转换为响应式对象
const state = reactive({
  count: 100
})

const changeCount = () => {
  // 注意：组合式API中，在此处使用state不用this，因为this的值是undefined
  state.count++
}
</script>

<template>
  <div>
    <!-- 在模版中引用响应式对象 -->
    <button @click="changeCount">{{ state.count }}</button>
  </div>
</template>

浏览器中查看结果：

点击按钮一次，数字增长了1：