vue使用splice操作數組更新頁面

直接對數組元素賦值，是不會更新視圖的。要使用arr.splice()方法更新數組，才會更新視圖。

 <template>
 <div>
      <ul>
          <li v-for="(item,i) in arr">{{item}}</li>
      </ul>

      <button @click="wrong">失效</button>
      <button @click="correct">生效</button>
 </div>
 </template>
 <script>
 export default {
   name: "Home",
   data () {
     return {
         arr:[1,2,3]
     };
   },
   methods: {
       wrong(){
           this.arr[0] = 9;   // 視圖不會更新，頁面上還是1，2，3
       },

       correct(){
           this.arr.splice(0,1,9); // 視圖更新了，頁面上是9，2，3
       }
       
   },
 }
 </script>
 <style lang="css" scoped>
 </style>