Vue Watcher无法捕获数组元素值变更问题求解

嘿，这个问题我太熟了！Vue2里监听数组元素的直接修改确实会踩这个坑，我来给你捋捋怎么解决：

为什么原来的配置不生效？ #

首先得搞清楚原因：Vue2的响应式系统对数组的监听，是通过拦截数组的变异方法（比如push/pop/splice这些）来实现的，但直接通过索引修改元素（比如this.dates[0] = '新时间'）这种操作，不在Vue的拦截范围内，哪怕你加了deep: true也没用——deep主要是用来监听对象内部属性的变化，对数组的索引赋值操作无效。

可行的解决方案 #

1. 使用this.$set（官方推荐） #

这是最直接的方式，Vue专门提供了$set方法来手动触发响应式更新，告诉Vue“我修改了数组的某个元素，请更新监听”。用法很简单：

// 比如修改数组第0个元素的时间
this.$set(this.dates, 0, '2018-01-09T16:00:00.000Z')

如果是在组件外，也可以用全局的Vue.set方法，效果完全一致。

2. 通过创建新数组触发监听 #

如果你不想用$set，也可以通过生成新数组的方式替换原数组——因为Vue会检测到数组引用的变化，从而触发watch。比如用map方法或者展开运算符：

// 用map修改指定元素
this.dates = this.dates.map((item, index) => {
  if (index === 0) {
    return '2018-01-09T16:00:00.000Z'
  }
  return item
})

// 或者用展开运算符拼接新数组
this.dates = [...this.dates.slice(0, 0), '2018-01-09T16:00:00.000Z', ...this.dates.slice(1)]

这种方式虽然是替换了整个数组，但本质上是创建新的数组引用，既不会破坏响应式，也能触发你的watch回调。

3. （进阶）把数组元素改成对象（如果场景允许） #

如果你的业务场景允许，也可以把每个时间字符串包装成对象，比如dates: [{ time: '2018-01-09T15:00:00.000Z' }, ...]，这样修改对象的time属性时，deep: true就能生效了：

// 修改元素值
this.dates[0].time = '2018-01-09T16:00:00.000Z'
// 此时你的watch配置（带deep: true）就能触发了

不过这个方案需要调整你的数据结构，适合本来就需要存储更多元素信息的场景。

总结 #

如果只是单纯修改数组里的字符串元素，优先用this.$set，这是官方最推荐的方案；如果不想改代码写法，生成新数组的方式也能完美解决问题。

内容的提问来源于stack exchange，提问作者Chris