Vue聊天应用mounted钩子赋值后页面不显示数据问题

该问题是Vue 2响应式系统的特性限制导致，接口请求本身逻辑正常：

• Vue 2无法拦截通过数组索引直接赋值的操作，代码中this.users[i] = user的写法不会触发视图更新
• 初始化阶段users被定义为空数组时，Vue仅对这个空数组本身做了响应式劫持，后续通过索引直接新增的数组项不会被响应式系统追踪，因此即使控制台能打印出正确的返回值，视图也无法感知数据变更。

额外说明：模板内的表达式默认绑定当前组件实例上下文，{{ this.users[0] }}里的this属于冗余写法，直接写{{ users[0] }}即可，不过这个写法问题不会导致数据渲染失败。

任选以下一种写法替换原有索引赋值逻辑即可触发正常的响应式更新：

• 方案1：直接替换整个数组引用，性能最优，不需要循环逐次触发更新

mounted() {
  firestoreService.getAllUsers().then(({ data }) => {
    this.users = data
  })
}

• 方案2：使用数组原生支持响应式拦截的变异方法批量追加数据

mounted() {
  firestoreService.getAllUsers().then(({ data }) => {
    data.forEach(user => {
      this.users.push(user)
    })
  })
}

• 方案3：使用Vue内置的$set方法手动给索引位置的属性做响应式赋值，写法较繁琐不推荐

mounted() {
  firestoreService.getAllUsers().then(({ data }) => {
    data.forEach((user, i) => {
      this.$set(this.users, i, user)
    })
  })
}

内容的提问来源于stack exchange，提问作者Áron Pop Adorján