在vue选项式风格中,data数据是放置在export default 导出的对象中的一个data方法里面返回

export default {
 // data() 返回的属性将会成为响应式的状态
 // 并且暴露在 `this` 上
 data() {
   return {
     count: 0
   }
 },
 }

但这样写,很明显一点都不优雅,代码缩进太多了,还没开始写呢,就已经嵌套了三层大花括号,

所以vue3借助了setup语法糖将data里的响应式数据声明大大的简化了,现在声明data响应式数据
只需要在使用setup标注了的script标签内直接声明就能使用

如下

效果

但是vue官方并不希望我们这样写
在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：
’

如下

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

为什么要使用 ref？​

你可能会好奇：为什么我们需要使用带有 .value 的 ref，而不是普通的变量？为了解释这一点，我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。从概念上讲，你可以将 ref 看作是一个像这样的对象：