vue中動態修改陣列的展現（資料更新，檢視不更新驗證）

<template>  <div>    <span v-for="item in arr" :key="item.id">{{item.name}}</span>    <!-- <span v-for="item in arr" :key="item">{{item}}</span> -->    <button @click="clickFn">測試</button>  </div></template>
<script>export default {  name: 'Test',  data () {    return {      msg: 'Welcome to Your Vue.js App',      arr: [        {          id: 1,          name: '測試1'        },        {          id: 2,          name: '測試2'        }      ]      // arr: [1, '2', 3]    }  },  methods: {    clickFn () {      this.arr[1].name = '測試'    }  }}</script>複製程式碼

這個執行正常

<template>  <div>    <!-- <span v-for="item in arr" :key="item.id">{{item.name}}</span> -->    <span v-for="item in arr" :key="item">{{item}}</span>    <button @click="clickFn">測試</button>  </div></template>
<script>export default {  name: 'Test',  data () {    return {      msg: 'Welcome to Your Vue.js App',      /* arr: [        {          id: 1,          name: '測試1'        },        {          id: 2,          name: '測試2'        }      ] */      arr: [1, '2', 3]    }  },  methods: {    clickFn () {      this.arr[1] = '測試'      console.log(this.arr)      }  }}</script>複製程式碼

執行正常，沒有報錯  但是資料更新了   試檢視沒有更新

1. (3) [1, "測試", 3, __ob__: Observer]
1. 0:1
2. 1:"測試"
3. 2