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)

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