Vue 当数组值改变页面没改变

之前遇到的问题了；

<template>
  <div class="about">
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="change">改变参数2</button>
  </div>
</template>
<script>
export default{
  data() {
    return {
      arr: ["参数1","参数2","参数3"]
    }
  },
  methods: {
    change() {
      this.arr[1] = "参数2改变";
      console.log(this.arr);
    }
  },
}
</script>

点击按钮参数2就会改变
这里看到参数确实发生了改变但视图中却没有变。

原因：

简单来说就是由于vue使用js的Object.defineProperty()的方法来实现检测数组的变动，但是第一个实现Object.defineProperty方法的浏览器是IE8，
而vue.js是不支持IE8的呀！！所以就出现了这个尴尬问题。
详细见：https://blog.csdn.net/spark333/article/details/99861153

解决方法

说两个简单的解决方法
方法一：强制渲染

<ul :key="a">
data() {
    return {
      arr: ["参数1","参数2","参数3"],
      a:1
    }
  },
  this.a++;
  /*
  给任意标签价格key data里声明key的值  然后每需要改变arr的值进行渲染就a++即可
  */

方法二：
直接把数组变成对象

arr: {
[name:'参数1'],
[name:'参数2'],
[name:'参数2'],
},

然后遍历这个对象就行