$set()解决vue数组添加数据后却不显示到视图上面的问题。

这几天开发遇到一个这样的问题：在vue实例已经创建好了的时候，当我们再向data里面的数组或对象加入属性时，发现数据不更新到视图上面。

举例说明一下，

<div>
  <ul>
    <li>{
   
   { info.name }}</li>
    <li>{
   
   { info.age }}</li>
    <li>{
   
   { info.hobby }}</li>
  </ul>
</div>

data() {
  return {
    info: {
       name:'lily',
       age:23,
       hobby:'draw'
    }
  }
},

页面呈现的效果：（css样式可以自己调整）

 现在我们有个需求：mounted函数接收到后端接口后发现缺少所需的变量，那么需要我们前端手动添加。如果我们用  arrary.变量名  或者  arrary["变量名"]  的方式添加，会发现不生效（其实数据已经加入到info中了，但是并没有更新到视图上）。此时我们就需要使用 this.$set()。

这是因为data中的数据是响应式的，我们也需要让添加的元素是响应式的（可以触发视图）

this.$set()使用方法：this.$set(object，obj，value)

object:要更改的数组或者对象；obj:要添加或者更改的属性（也可以是下标）；value:属性的值

还有一些函数也是可以更新视图的，例如pop、push、shift、unshift、splice、sort、reverse这些。