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()

將對象轉(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">檢查對象</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const myObject = ref({}); // 響應(yīng)式對象

// 方法：檢查對象是否為空
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>

注意事項：

響應(yīng)式對象

使用 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);

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果
這篇文章主要介紹了vue3 vue-draggable-next如何實現(xiàn)拖拽穿梭框效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue中axios防止多次觸發(fā)終止多次請求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請求的實現(xiàn)方法（防抖）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
Vue3封裝ant-design-vue表格的詳細代碼
這篇文章主要介紹了Vue3封裝ant-design-vue表格，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-05-05
詳解Vue項目在其他電腦npm run dev運行報錯的解決方法
這篇文章主要介紹了詳解Vue項目在其他電腦npm run dev運行報錯的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
vue學(xué)習(xí)筆記之過濾器的基本使用方法實例分析
這篇文章主要介紹了vue學(xué)習(xí)筆記之過濾器的基本使用方法,結(jié)合實例形式分析了vue.js過濾器的基本功能、用法與操作注意事項,需要的朋友可以參考下
2020-02-02
使用Vue3和Plotly.js繪制交互式漏斗圖的示例代碼
漏斗圖常用于可視化業(yè)務(wù)流程中的各個階段的轉(zhuǎn)換率,例如銷售漏斗或營銷漏斗,它可以幫助用戶識別流程中的瓶頸和改進機會,本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實現(xiàn)圖片滑動驗證功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片滑動驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
Vue實現(xiàn)返回頂部按鈕實例代碼
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10