数据双向绑定是vue的一大特点，更改data中的数据时，页面会实时响应，但是在我们的开发过程中可能会遇见以下这种情况，视图不会更新。

 <div class="root">
    <div v-for="item in list" :key="item">
      {{ item }}
    </div>
    <button @click="alterData">修改数据</button>
  </div>

data() {
    return {
      list: ["11", 22, 33, 44, 55],
    };
  },

 methods: {
    alterData() {
      this.list[0] = 33;
    },
  },

这是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，因此vue提供了$set这个API来解决这个限制。vue官网对这一块也有详细的说明。

如果我们把alterData这个方法换成如下这种写法，页面视图就能实时更新。

alterData(){
    this.$set(this.list,0,99)
   }
   
  this.$set(array,key,value) 
  // array 代表 数组 // key 代表 键名 // value 代表 新的值

如果要修改的值是一个对象

对象：
data:{ 'color':'#fff', 'size':'500' } 
Vue.set(object,key,value) 
// object 代表 对象 // key 代表  键名 // value 代表 新值