Vue2动态添加属性导致页面不更新的原因与解决方案

<div id="app">
  <p v-for="(value, key) in item" :key="key">
    {{ value }}
  </p>
  <button @click="addProperty">动态添加新属性</button>
</div>

const app = new Vue({
  el: "#app",
  data: () => ({
    item: {
      oldProperty: "旧属性"
    }
  }),
  methods: {
    addProperty() {
      this.item.newProperty = "新属性"; // 动态添加新属性
      console.log(this.item); // 数据确实更新了
    }
  }
});

const obj = {};
let val = "初始值";

Object.defineProperty(obj, "foo", {
  get() {
    console.log(`get foo: ${val}`);
    return val;
  },
  set(newVal) {
    if (newVal !== val) {
      console.log(`set foo: ${newVal}`);
      val = newVal;
    }
  }
});

obj.bar = "新属性";

Vue.set(this.item, "newProperty", "新属性");

function set(target, key, val) {
  defineReactive(target, key, val);
  dep.notify(); // 通知视图更新
  return val;
}

this.item = Object.assign({}, this.item, { newProperty: "新属性" });

this.item.newProperty = "新属性";
this.$forceUpdate();