vue中直接通过更改数组下标的方式明明可以更新视图啊

Question

如题，自己代码里试了下，直接data里定义一个arr: [0,1,2,3]，然后绑定一个点击事件里this.arr[4] = 4，然后视图里<li>{{arr[arr.length-1]}}</li>值确实改变了的啊。

为啥官方文档里说直接通过下标的方式改变不了呢？我试了试不管是直接通过下标还是变异方法还是Vue.set的方式都可以正常更新视图啊。求教

Answer 1

视图更新是全局的，一个地方更新会使其他修改的地方更新；

eventFn(){
      this.blue = !this.blue;//你把这两句都注销再试试。
      this.c = 'wa ha ho';//你把这两句都注销再试试。
      this.arr[4] = 4;
      // this.arr.splice(4,1,4)
      // Vue.set(this.arr, 4, 4)
    }

Answer 2

可以试试这个例子

<template>
  <div>
    <el-input v-model="datalist[0]"></el-input>
    {{datalist[0]}}
    <el-button type="primary" @click="change1">change1</el-button>
    <el-button type="primary" @click="change2">change2</el-button>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        datalist:['1','2','3','4']
      }
    },
    methods:{
      change1(){
        this.datalist[0]='111';
      },
      change2(){
        this.$set(this.datalist,0,'222');
      }
    }
  }
</script>

视图里修改data里的数组，data会改变
修改data里的数组，视图不会改变，得用$set