小编Nec*_*hoj的帖子

当我从空对象创建 aref并随后添加对象属性时，没有反应性：

<template>
  <p>{{hello}}</p>
  <button @click="add()">Click me</button>
</template>

<script>
import {ref} from 'vue';
export default {
  name: "Test",
  setup(){
    const myData = ref({});
    return {myData}
  },
  methods: {
    add(){
      this.myData["text"] = "Hello";
      console.log(this.myData);
    }
  },
  computed: {
    hello(){
      return this.myData.hasOwnProperty("text")) ? this.myData["text"] : "no text";
    }
  }
}
</script>

单击按钮显示myData 已更改，但计算的属性hello未更新。

也尝试过reactive({})而不是ref({})没有成功。

当我们使用诸如 之类的属性初始化 ref 时，它会起作用const myData = ref({"text": "no text"});。

但为什么空对象不起作用呢？

编辑：
终于找到了问题到底是什么以及如何解决：Vue3 的反应性核心不警惕属性的Object.keys()值，而仅警惕属性的值，而空对象没有任何属性值。但是，如果计算属性定义如下，则可以使 Vue3 发出警报 …