vue 数组数据改变界面不更新

vue中:
	数组元素的改变和数组长度改变不能触发状态更新
	如
		arr[n]='x';
		arr.length=x;
		
	解决方案:
		第一种:Vue.set(this.arr,index,x);
		第二种:调用splice方法

代码示例:

<template>
  <div id="app">
    <div>
      <input type="text"/>
      <ul>
        <li v-for='(item,index) in arr' :key='index' @click="clc(index)">
          <input type='checkbox' :checked='arr[index]'> 
          <!-- item.done -->
          内容+{{index}}
        </li>
        <button class='b' @click='c1'>全部</button>
        <button class='b' @click='c2'>未完成</button>
        <button class='b' @click='c3'>已完成</button>
      </ul>
    </div>
    <div class='btn'>
      <button>提交</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data(){
    return{
      // arr:[{done:false},{done:false},{done:false},{done:false},{done:false}],
      arr:[false,false,false,false,false],
      index2:0,
      flag:false
    }
  },
  methods: {
    clc(index=0)
    {
      console.log(index);
      Vue.set(this.arr,index, !this.arr[index])
    }
  },
  
  components: {

  }
}
</script>

<style>
#app{
  display: flex;

}
#app>div{
  flex: 3;
  height: 30px;
  margin-right: 20px;
}
#app>div>input{
  height: 30px;
  width: 100%;
}
#app>div>ul>li{
  list-style: none;
  height: 30px;
  width: 100%;
  border: solid 1px #ccc;
  line-height: 30px;
}
.btn>button{
  flex:1;
  width: 120px;
  height: 40px;
  background-color:#0C8AFF;
  border: none;
  border-radius: 5px;
  color: white;
}
.b{
  width: 120px;
  height: 40px;
  background-color:#0C8AFF;
  border: none;
  border-radius: 5px;
  color: white;
  margin-right: 20px;
}

</style>