vue中如何判断一个Observer对象，是否有属性

最新推荐文章于 2023-12-18 17:04:13 发布

原创最新推荐文章于 2023-12-18 17:04:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了Vue2.6和Vue3.x中`observable`函数的不同之处。在Vue2.x中，`observable`直接变更原始对象，而在Vue3.x中，它返回一个响应式代理，直接修改源对象不会触发响应。因此，推荐在Vue3.x中使用返回的代理对象进行操作，以保持响应性。示例代码展示了`Object.entries`和`Object.hasOwnProperty`在观测对象上的行为差异。

Vue2.6新增了observable函数，用于生成一个响应式对象。
关于observable函数，Vue官方文档是这样描述的：

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，所以如这里展示的，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。

Object.entries(obj).length > 0亲测有效:
MDN中关于entries的用法：
在这里插入图片描述

// 引入Vue
import Vue from 'vue';
// 省略n行代码......
    mounted() {
    const Zhangsan = Vue.observable({ name: '张三', age: 65 });
    const Lisi = { name: '李四', age: 65 };
    console.log(Object.entries(Zhangsan).length > 0, '=====entries 张三');// true
    console.log(Object.entries(Lisi).length > 0, '=====entries李四');// true

    console.log(Object.hasOwnProperty(Zhangsan), '=====hasOwnProperty 张三'); //false: hasOwnProperty方法无法判断Observer对象有属性
    console.log(Object.hasOwnProperty(Lisi), '=====hasOwnProperty 李四'); //true hasOwnProperty方法可判断普通对象有属性
  },
  },