vue-数据变了，但视图没有更新

今天写代码的时候发现数据变更了，但是视图没有更新
百度了一下发现vm.items[indexOfItem] = newValue 是监测不到的
特意写了一个页面验证一下，确实是监测不到的

输出

然后发现，视图要响应数组的改变需要
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
还有 set

<template>
  <!-- 验证vm.items[indexOfItem] = newValue是否真的无效 -->
  <div>
    <div>{
    
    {
    
    aa}}</div>
    <ul>
      <li v-for="item in list"
          :key="item.id">
        {
    
    {
    
    item.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    
    
  name: 'testWuXiao',
  data () {
    
    
    return {
    
    
      aa: 'abcdefg',
      list: [
        {
    
    
          id: '1', text: 'A'
        },
        {
    
    
          id: '2', text: 'A'
        }
      ]
    }
  },
  mounted () {
    
    
    this.aa = 'hijklmn'
    for (let i = 0; i < this.list.length; i++) {
    
    
      // this.list[i].text = 'B'
      this.$set(this.list[i], 'text', 'B')
    }
  }
}
</script>

<style scope lang="less">
</style>