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