Vue-为对象和数组新增属性 this.$set()

问题描述：vue的data里边是已经声明或者赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性或者操作数组元素，如果更新此属性的值，是不会更新视图的。

如下列代码：

<template>
	<div>
		<ul>
            <template v-for="item in userInfo">
               <li>{{item}}</li>
            </template>
        </ul>
        <el-button @click="addInfo" type="primary">添加用户性别</el-button>
	</div>
</template>

<script>
    export default {
      data(){
        return {
          userInfo:{
            name:'张三'
          }
        }
      },
      methods:{
        addInfo(){
          this.userInfo.sex='男';
          console.log(this.userInfo);
        }
      }
    }
</script>

单击按钮为userInfo添加sex属性，console.log输出的数据有sex，但是视图层没有更新，效果如下图：

此时可以看出：data数据区的 userInfo 已经添加了 sex 属性，且值为 男 ，但是并没有渲染到页面上。
这是什么原因造成的？
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。

解决方法：this.$set(object,key,value)
object：对象名
key：,要修改 / 增加的属性名
value：新增的属性值

addInfo(){
  this.$set(this.userInfo,'sex','男');
  console.log(this.userInfo);
}

单击按钮后，新添加的属性值会被Vue监听到并且同步渲染到页面上，如下图：

注意：数组也同样（数组里边的值是对象）
解决方法：this.$set(array,index,value)
array：数组名
index：需要修改的索引值
value：新元素