红色扁平化网站制作一个小型网站
在 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：需要重新赋值的变量（如计算临时值、循环计数器）。