咸虾米项目总结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:需要重新赋值的变量(如计算临时值、循环计数器)。