解决方案1: 使用其他数据的更新带动数组的更新
    解决方案2: 强制更新视图 his.$forceUpdate();
    解决方案3: 调用数组的set函数更新数据, 由于视图更新的逻辑是在set函数中实现的,通过索引修改数组不会触发set函数, 所以我们手动调用set函数即可 this.$set(this.array, 1, “b”)

    1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <h1>{{count}}-{{array}}-{{obj.name}}</h1>
    5.         <button @click="change">更新</button>
    6.     </div>
    7.     <script>
    8.         new Vue({
    9.             el: '#myApp',
    10.             data: {
    11.                 count: 0,
    12.                 array: [1,2,3,4],
    13.                 obj: {name:"zhangsan", age: 20}
    14.             },
    15.             methods: {
    16.                 change(){
    17.                     // this.count++ ;
    18.                     // this.obj.name = "lisi" ; 
    19.                     // this.array.push(5); 
    20.                     this.array[1] = "b";
    21.                     // 特殊情况: 
    22.                     // 1, 使用数组的索引修改数组中的数据, 且数组的长度不发生变化时, 视图不会更新
    23.                     this.count = this.count;
    24.                     this.obj.name = "zhangsan"
    25.                     // 2, 值类型数据如果更新前后值相同, 视图不更新
    28.                     // 解决方案1: 使用其他数据的更新带动数组的更新
    29.                     // this.obj = {name:"zhangsan", age: 20}
    31.                     // 解决方案2: 强制更新视图
    32.                     // this.$forceUpdate();
    34.                     // 解决方案3: 调用数组的set函数更新数据, 由于视图更新的逻辑是在set函数中实现的,通过索引修改数组不会触发set函数, 所以我们手动调用set函数即可
    35.                     this.$set(this.array, 1, "b")
    37.                     // 相比之下, 方案三比方案二执行效率更高
    38.                 }
    39.             }
    40.         })
    41.     </script>
    42. </body>