Vue3判断对象是否为空的实现方式

更新时间：2025年07月30日 08:40:09 作者：滿

这篇文章主要介绍了Vue3判断对象是否为空的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1、Object.keys()

检查对象自身可枚举属性的数量：

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;
});

// 动态消息
const message = computed(() => 
  isEmpty.value ? '对象为空' : '对象包含数据'
);
</script>

注意事项：

响应式对象

使用 reactive() 或 ref() 创建的对象需通过 .value 访问（组合式 API 中）。

特殊对象

如 Date, Map, Set 等需要额外处理，例如：

// 处理 Date 对象
if (obj instanceof Date) return false; // 非空

性能考虑

（1）Object.keys()：性能最佳（推荐）JSON.stringify()：较慢，但可处理嵌套对象Reflect.ownKeys()：包含不可枚举属性和 Symbol

工具函数

// 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);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue修改props数据报错的问题及解决
这篇文章主要介绍了vue修改props数据报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue-router传参的4种方式超详细讲解
我们在组件切换时经常会有传递一些数据的需求,这样就涉及到了路由传参的问题,下面这篇文章主要给大家介绍了关于vue-router传参的4种超详细方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Vue 项目中遇到的跨域问题及解决方法(后台php)
这篇文章主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php)，前端采用vue框架，后台php，具体解决方法，大家参考下本文
2018-03-03
Vue实现自定义右击删除菜单的示例
本文主要介绍了Vue实现自定义右击删除菜单的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 构建网站(三)使用组件
本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
vue3子组件改变父组件的值（props）reactive和ref的区别及说明
这篇文章主要介绍了vue3子组件改变父组件的值（props）reactive和ref的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05
Vue3属性绑定方法解析
这篇文章主要介绍了Vue3属性绑定方法解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
Vue3路由高级玩法实战指南从模块化到企业级实践
VueRouter4通过一系列改进,提升了对复杂应用的支持,核心变化包括更现代的创建方式、更灵活的动态路由和守卫系统,文章还探讨了模块化路由管理、权限控制、懒加载、动画以及企业级实践,强调了在实际项目中灵活应用这些特性的重要性,感兴趣的朋友跟随小编一起看看吧
2026-03-03
Vue中自定义全局组件的实现方法
这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以这篇文章主要给大家介绍了关于Vue中自定义全局组件的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12