VUE-使用$set方法改变对像或数组，页面数据同步变化

1、 对象：

<h1 v-for="(item,index) in userInfo" :key="index">{{item}}</h1>

data() {
      return {
              userInfo: {
                id:"1",
                name:"lucy"
              },
     }
}

页面展示效果：

1
lzz

追加数据：

this.$set(this.userInfo,"age","16");

追加之后的页面展示效果：

1
lzz
16

2、数组：

<h1 v-for="item in userInfo" :key="item.id">{{item.name}}</h1>

data() {
      return {
           userInfo: [{
                id:"1",
                name:"lucy"
              },
              {
                id:"2",
                name:"lily"
              },
              {
                id:"3",
                name:"tom"
              }
           ]
     }
}

页面展示效果：

lucy
lily
tom

追加数据：

let newObj={id:"3",name:"sam"};
this.$set(this.userInfo,3,newObj);

追加之后的页面展示效果：

lucy
lily
tom
sam