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)

 

　　這樣，修改數組中單個元素值的需求就實現了