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