Vue 3 响应式状态揭秘：ref() 函数的魔法

前端开发博客

于 2024-05-19 10:01:01 发布

阅读量671

点赞数 19

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/lgno2/article/details/139051914

版权

大家好，我是宝哥。

今天我们来聊聊Vue 3中的状态管理，让你的应用状态更加灵动。

什么是响应式状态？

响应式状态是一种特殊的状态，当底层数据发生变化时，它能够自动更新用户界面。

为什么我们不能像在普通JavaScript中那样使用可变变量呢？

你可能会问，虽然这些变量的值可以在UI中显示，但对它们的任何更改都不会反映出来。

在Vue 3中声明响应式状态

在Vue 3中，ref()函数就像是个强大的盒子，能够存储各种类型的数据，让它们变得响应式。这个盒子可以存储字符串、数字、布尔值、对象、数组等等。

你可以创建一个空的盒子，或者给它一个初始值，作为默认值。在这个例子中，我们使用0作为初始值。

现在，剩下的唯一事情就是为我们刚刚创建的框分配一个标签，我们可以通过定义一个变量来做到这一点。

🤠 就是这样，您刚刚创建了一个反应变量！

如何使用响应式状态？

现在我们的盒子已经准备好了，那我们怎么再次查看里面的内容呢？

我们使用.value属性来打开盒子，查看里面的内容。

注意，只有在使用JavaScript时才需要使用.value。Vue在模板中使用时会自动解包响应式变量。

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

const count = ref(0)
console.log(count.value) // .value is necessary here
</script>

<template>
  <!-- No need for .value here -->
  <h1>The count is {{ count }}</h1> 
</template>