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

在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的渲染系统所使用,并且当它变化时,可以触发界面的更新。它不仅仅是一个常量,而是一个可以改变的响应式变量。

相关推荐
雾恋16 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊16 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A17 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理17 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人18 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥3018 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
IT古董18 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
解道Jdon18 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
慢半拍iii19 小时前
JAVA Web —— A / 网页开发基础
前端
gnip19 小时前
pnpm 的 monorepo架构多包管理
前端·javascript