Vue方法中修改数组某一项元素而不能响应式更新

<template>
  <div>
    <ul>
      <li v-for="(item, i) in ms" :key="i">{{item}}</li>
    </ul>
    <button @click="change()">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ms: [1, 2, 3]
    }
  },
  methods: {
    change () {
      this.ms[0] = 100
      console.log(this.ms)
    }
  },
  onLoad (params) {
    this.keyword = params.keyword
  }
}
</script>

　　上面的代码想要实现点击按钮修改数组第一个元素的值。

　　然而，实际运行后发现控制台打印的数据显示已经修改成功了，但是页面上的数据却没有更新（不是响应式的）。

　　是什么原因导致的呢？我查了一下官方文档，文档中内容如下：

　　　

 

　　文档中明确指出，vue不能检测上述数组的变动，同时文档中也指出了实现上述需求的方法：

　　将 change() 函数中的代码 this.ms[0] = 100 改写为 this.set(this.ms, 0, 100)

 

　　这样，修改数组中单个元素值的需求就实现了