咸虾米项目总结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({}) 处理表单？

• 表单通常需要双向绑定，初始化为 {} 可避免模板中频繁的 v-if 判断

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

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

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

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

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

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

扩展2：

let：需要重新赋值的变量（如计算临时值、循环计数器）。