Question

在纯JS中，可以就地修改数组：

＆＃13;

a = ["a", "b"]
a.forEach((e, i, a) => {
  a[i] = e + " hello"
})
console.log(a)

＆＃13;

我尝试将此代码移植到Vue，但修改不会发生：

＆＃13;

new Vue({
  el: "#app",
  data: {
    a: ["a", "b"]
  },
  mounted() {
    this.a.forEach((e, i, a) => {
      a[i] = e + " hello"
    })
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  {{ a }}
</div>

＆＃13;

是否可以在Vue中对反应数据进行此类修改？

Answer 1

在你的情况下，我的意思是阵列变异到位，你应该使用beforeMount生命周期钩子：因为mounted在DOM更新后执行，你不会看到你的forEach的结果操作。

请参阅官方文档here上的生命周期图。

但是，正如上面评论中所建议的

＆＃34;反应＆＃34;和＃34;到位＆＃34;不能一起玩。

只要有可能就让它变得不可变。我的意思是：

new Vue({
  el: "#app",
  data: {
    a: ["a", "b"]
  },
  beforeMount() {
    this.a = this.a.map(x => x + " hello")
  }
})

如何修改无功阵列？

1 个答案: