Vue项目，通过数组下标更改数组的值不生效，页面没有重新渲染

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

问题背景：今天在开发中遇到了一个需要，在列表里要通过按钮的点击控制手机号码列是显示正常的号码还是显示星号******。

页面大致原型：

首先想到的实现方式就是给表格的每条数据增加一个showFlag属性，showFlag:true显示正常的手机号，showFlag:false显示星号*****。点击按钮就修改该条数据的showFlag的值。简易代码如下：

// 页面简易代码，大家理解这个意思就行
<div v-for="item in list">
    <span v-if="item.showFlag">{{ item.phone }}</span>
    <span v-else>******</span>
</div>


// 数据
data() {
    return {
        list: []
    }
},
created() {
    this.getList()
},
methods: {
    // 显示手机号按钮的点击方法
    clickBtn(index) {
        this.list[index].showFlag = !this.list[index].showFlag 
    },
    // 获取列表数据的方法
    getList() {
        this.list = [
                { id: 1, phone: 13400003333 },
                { id: 2, phone: 13400005555 }
              ]
        this.list.map(item => {
            item.showFlag = false
        })
    }
}

看代码感觉逻辑万无一失，实际情况就是：点击第一下：从*****变成数字，再点击这条数据的按钮，页面显示并不会从数字变换成*****。

产生问题的原因：Vue2并不支持数组下标的响应式。也就是说Vue2检测不到通过下标更改数组的值。

解决办法：使用Vue官网提供的方法更改数组下标的值

  // 显示手机号按钮的点击方法
    clickBtn(index) {
        this.list[index].showFlag = !this.list[index].showFlag
        // 增加下面这行代码
        this.$set(this.list, index, this.list[index])
    },

至于为啥Vue2不支持这个可以看官网尤大给的解释

 也就是说其实是可以实现数组下标的响应式的，出于性能考虑，Vue2并没有实现。大家可以尝试手动实现对数组下标的监听：

var arr = [1, 2, 3]
arr.forEach((item, index) => {
  Object.defineProperty(arr, index, {
    set: function(val) {
      console.log('set', val)
      item = val
    },
    get: function() {
      console.log('get', item)
      return item
    }
  })
})

arr[1] // get 2
arr[1] = 33 // set 33
arr[1] // get 33

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。