const loading = ref(true)中loading 是常亮还是变量

White-Legend2024-04-21 21:12

在Vue 3中使用Composition API时，当你声明 const loading = ref(true)，loading 是一个响应式的引用（reactive reference），而不是一个常规的JavaScript变量。

这里的ref函数是Vue提供的，用来创建一个响应式的状态。ref(true)创建了一个初始值为true的响应式引用。这意味着loading可以被Vue的模板系统自动跟踪，并且当它的值发生变化时，相关的组件可以重新渲染以反映这个变化。

在模板中，你可以像使用普通变量一样使用loading，Vue会自动处理它的解包（unwrapping）。例如：

vue 复制代码

<template>
  <div v-if="loading">Loading...</div>
</template>

在组件的JavaScript逻辑中，你可以通过.value属性来访问或修改loading的当前值，例如：

javascript 复制代码

loading.value = false; // 修改响应式引用的值

或者，如果你在<script setup>上下文中，可以直接对其进行赋值，因为<script setup>会自动解包ref：

javascript 复制代码

// 在setup函数内部或<script setup>中
loading = false; // 等同于loading.value = false

总结来说，loading在这里是一个响应式的状态，可以被Vue的渲染系统所使用，并且当它变化时，可以触发界面的更新。它不仅仅是一个常量，而是一个可以改变的响应式变量。