vue给对象添加属性没有响应式的问题及解决

this.$set(this.goodsdata, 'isShow', false)

<template>
  <div id="app">
    <button @click="changem">按钮</button>
    <ul v-for="item in items">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>
 
<script>
import Vue from "vue";
 
export default {
  name: "App",
  data() {
    return {
      items: {
        a: "我是a",
      },
    };
  },
  methods: {
    changem() {
      this.items.m = "我是m";
      console.log(this.items);
    }
}
</script>

 <button @click="change1">按钮b</button>
.
.
.
.
.
 change1() {
      this.items.b = "我是b";
      this.$forceUpdate(); 
      console.log(this.items);
      this.$nextTick(() => {
        console.log(this.items);
      })
    }

    <button @click="change2">按钮c</button>
.
.
.
.
.
 change2() {
      Vue.set(this.items, "c", "我是c"); //视图更新
      console.log(this.items);
    },

    <button @click="change3">按钮d</button>
.
.
.
.
.
    change3() {
      this.items = Object.assign({}, this.items, {
        d: "ddd",
        e: "eee",
      });
      console.log(this.items);
    }