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

已经创建了一个Vue3项目：

App.vue文件的内容如下：

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

// 执行ref函数，它接收简单类型或者对象类型的数据传入。ref函数返回一个响应式对象，用变量接收
const count = ref(0)
console.log(count)

const changeCount = () => {
  // 在脚本区域想修改由ref()函数产生的响应式对象的值，必须通过.value的属性
  count.value++
}
</script>

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

在浏览器中查看输出：

点击按钮一次，值增加了1：

在浏览器开发者工具的控制台看看日志中打印出来的count的结构，它是一个对象，有一个属性value：