当前位置: 首页 > news >正文

咸虾米项目总结1--const用法

在 UniApp(或 Vue 3)中,声明一个空对象可使用下面这2种写法:

// 写法1
const a = ref(null);// 写法2
const a = ref({});

 在UniApp中,const a = ref()用法概述:

用途:

创建一个响应式引用(Reactive Reference),通常用于 Vue 3 的 Composition API。

特点:

ref() 将普通值(如 null、数字、字符串等)包装成一个响应式对象,通过 .value 访问实际值。在模板中自动解包(无需写 .value)。

这两种写法的区别:

1. const a = ref(null)
初始值:null(明确表示“无值”)。

特点:

适合用于 延迟赋值 或 可选数据,比如异步请求返回前初始化为 null。

直接访问 a.value 时需做非空校验(否则可能报错)。

 示例代码:

import {apiUserInfo} from "@/api/api.js"
import {ref} from "vue"//声明一个null对象
const userInfo = ref(null)//将接口获取到的值赋值给userInfo
function getUserInfo(){apiUserInfo().then(res=>{userInfo.value = res.data})
}

模板中使用,下面来自于写法,如果用户信息中包含城市则取城市的值,如果没有则取省份的值,再没有则取国家的值

<view class="ip">{{userInfo.IP}}
</view>
<view class="address">来自于:{{userInfo.address.city||userInfo.address.province||userInfo.address.conuntry}}
</view>

在外层,为防止userInfo报错,需添加v-if判断

<view class="userLayout pageBg" v-if="userInfo">

 

2. const a = ref({})
初始值:空对象 {}。

特点:

适合需要 立即操作对象属性 的场景,避免 null 导致的报错

即使数据未加载,也可以安全访问属性(如 a.value.key 返回 undefined,而不会报错)。

示例代码:

<script setup>import {ref} from 'vue'import { apiNoticeDetail }  from "@/api/api.js"import {onLoad} from "@dcloudio/uni-app"const noticeInfo = ref({})let noticeId;onLoad((e)=>{noticeId = e.id//在onLoad执行才能拿到参数Id的值getNoticeDetail()})function getNoticeDetail(){apiNoticeDetail({id:noticeId}).then(res=>{noticeInfo.value = res.data})}</script>

上面的代码中将noticeInfo声明为{},

模板中使用无需添加v-if判断而不报错

<view class="info"><view class="item">{{noticeInfo.author}}</view><view class="item"><uni-dateformat :date="noticeInfo.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat></view>
</view>

关键区别对比

特性ref(null)ref({})
初始值类型null空对象 {}
访问属性安全性直接访问 a.value.key 会报错返回 undefined(不会报错)
适用场景数据未加载前明确无值需要立即操作对象结构的场景
模板中渲染需配合 v-if 判断可直接渲染(如 {{ a.value.key }}

 推荐:

ref({}) 处理表单?
  • 表单通常需要双向绑定,初始化为 {} 可避免模板中频繁的 v-if 判断

需要明确区分“无数据”和“空数据” → ref(null)

需要安全访问嵌套属性 → ref({})

扩展1:ref() 的其他初始值

  • ref(0):适合数字类型的初始值(如计数器)。

  • ref(''):适合字符串初始值(如输入框)。

  • ref([]):适合数组初始值(如列表数据)。

扩展2:

let:需要重新赋值的变量(如计算临时值、循环计数器)。

相关文章:

  • LeetCode Hot 100 最大子数组和
  • 推荐几本关于网络安全的书
  • 动态执行js
  • 系统架构设计师备考之架构设计专业知识
  • 软考 系统架构设计师系列知识点之杂项集萃(100)
  • 海量数据存储与分析:HBase、ClickHouse、Doris三款数据库对比
  • http相关网络问题面试怎么答
  • C++ 格式化输入输出
  • Vue中的v-if与emit事件传递:一个常见陷阱分析
  • swift-19-从OC到Swift、函数式编程
  • SpringSecurity6-oauth2-三方gitee授权-授权码模式
  • 鸿蒙 Swiper 组件解析:轮播交互与动画效果全指南
  • 疏通经脉: Bridge 联通逻辑层和渲染层
  • 【python】~实现工具软件:QQ邮件即时、定时发送
  • 算法-基础算法-递归算法(Python)
  • PYTHON从入门到实践10-文件操作与异常
  • 日语学习-日语知识点小记-进阶-JLPT-真题训练-N2阶段(5):2022年12月2023年7月
  • 全新大模型开源,腾讯(int4能打DeepSeek) Vs 谷歌(2GB运行多模态)
  • Gemini-CLI:谷歌开源的命令行AI工具,重新定义开发者工作流
  • MyBatis批量删除