Vue3判斷對(duì)象是否為空的實(shí)現(xiàn)方式
更新時(shí)間：2025年07月30日 08:40:09 作者：滿(mǎn)
這篇文章主要介紹了Vue3判斷對(duì)象是否為空的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
1、Object.keys()
檢查對(duì)象自身可枚舉屬性的數(shù)量：
const isEmpty = Object.keys(obj).length === 0;
2、JSON.stringify()
將對(duì)象轉(zhuǎn)為 JSON 字符串判斷：
const isEmpty = JSON.stringify(obj) === '{}';3、Reflect.ownKeys()（包含 Symbol 屬性）
const isEmpty = Reflect.ownKeys(obj).length === 0;
示例：
<template>
<div>
<p v-if="isEmpty">{{ message }}</p>
<button @click="checkObject">檢查對(duì)象</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const myObject = ref({}); // 響應(yīng)式對(duì)象
// 方法：檢查對(duì)象是否為空
const checkObject = () => {
console.log(isEmpty.value ? '對(duì)象為空' : '對(duì)象不為空');
};
// 計(jì)算屬性
const isEmpty = computed(() => {
return Object.keys(myObject.value).length === 0;
});
// 動(dòng)態(tài)消息
const message = computed(() =>
isEmpty.value ? '對(duì)象為空' : '對(duì)象包含數(shù)據(jù)'
);
</script>注意事項(xiàng)：
響應(yīng)式對(duì)象
使用 reactive() 或 ref() 創(chuàng)建的對(duì)象需通過(guò) .value 訪(fǎng)問(wèn)（組合式 API 中）。
特殊對(duì)象
如 Date, Map, Set 等需要額外處理，例如：
// 處理 Date 對(duì)象 if (obj instanceof Date) return false; // 非空
性能考慮
（1）Object.keys()：性能最佳（推薦）JSON.stringify()：較慢，但可處理嵌套對(duì)象Reflect.ownKeys()：包含不可枚舉屬性和 Symbol
工具函數(shù)
// utils/isEmptyObject.js
export const isEmptyObject = (obj) => {
if (obj === null || typeof obj !== 'object') {
return true; // 非對(duì)象直接判空
}
return Object.keys(obj).length === 0;
};
// 在 Vue 中使用
import { isEmptyObject } from '@/utils/isEmptyObject';
const isEmpty = isEmptyObject(myObject);總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue修改props數(shù)據(jù)報(bào)錯(cuò)的問(wèn)題及解決
這篇文章主要介紹了vue修改props數(shù)據(jù)報(bào)錯(cuò)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
我們?cè)诮M件切換時(shí)經(jīng)常會(huì)有傳遞一些數(shù)據(jù)的需求,這樣就涉及到了路由傳參的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue-router傳參的4種超詳細(xì)方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue 項(xiàng)目中遇到的跨域問(wèn)題及解決方法(后臺(tái)php)
這篇文章主要介紹了Vue 項(xiàng)目中遇到的跨域問(wèn)題及解決方法(后臺(tái)php)，前端采用vue框架，后臺(tái)php，具體解決方法，大家參考下本文2018-03-03
本文主要介紹了Vue實(shí)現(xiàn)自定義右擊刪除菜單的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:?could?not?proxy?request
這篇文章主要給大家介紹了關(guān)于如何解決Vue運(yùn)行項(xiàng)目報(bào)錯(cuò)proxy?error:could?not?proxy?request的相關(guān)資料,Proxy Error指的是代理服務(wù)器無(wú)法正確處理請(qǐng)求的錯(cuò)誤,需要的朋友可以參考下2023-08-08
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue3子組件改變父組件的值（props）reactive和ref的區(qū)別及說(shuō)明
這篇文章主要介紹了vue3子組件改變父組件的值（props）reactive和ref的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
Vue3路由高級(jí)玩法實(shí)戰(zhàn)指南從模塊化到企業(yè)級(jí)實(shí)踐
VueRouter4通過(guò)一系列改進(jìn),提升了對(duì)復(fù)雜應(yīng)用的支持,核心變化包括更現(xiàn)代的創(chuàng)建方式、更靈活的動(dòng)態(tài)路由和守衛(wèi)系統(tǒng),文章還探討了模塊化路由管理、權(quán)限控制、懶加載、動(dòng)畫(huà)以及企業(yè)級(jí)實(shí)踐,強(qiáng)調(diào)了在實(shí)際項(xiàng)目中靈活應(yīng)用這些特性的重要性,感興趣的朋友跟隨小編一起看看吧2026-03-03
這兩天學(xué)習(xí)了Vue.js 感覺(jué)組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以這篇文章主要給大家介紹了關(guān)于Vue中自定義全局組件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12