Vue.js模板中动态操作数组致浏览器无响应问题求助

嘿，这个问题我太熟悉了！你遇到的浏览器无响应问题，根源在于无限循环的生命周期触发，我来给你拆解清楚：

问题原因 #

你在updated钩子函数里执行了this.operations.push('UPDATED : ')——而Vue的响应式规则是：当你修改响应式数据（比如operations数组）时，会触发组件重新渲染；组件渲染完成后，又会触发updated钩子。这样一来，push→重新渲染→updated→push……形成了一个无限循环，浏览器被这个循环占满了资源，自然就无响应了。

解决思路 #

针对这个问题，有两种常见的处理方式：

1. 移除updated钩子中的响应式数据修改（推荐） #

如果你的需求只是在组件创建、挂载阶段记录生命周期，完全不需要在updated里修改数组。直接删掉updated钩子的内容即可，代码如下：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Understanding Hooks',
    operations: ['One', 'Two'],
  },
  created: function() {
    console.log('=> ', this.operations)
    this.operations.push('CREATED : ');
  },
  mounted: function() {
    this.operations.push('MOUNTED : ');
  },
  // 移除updated钩子，避免无限循环
  destroyed: function() {
    this.operations.push('DESTROYED : ');
  },
})

2. 给updated钩子加触发条件（如果确实需要在updated中操作） #

如果你有必须在updated中执行的逻辑，一定要添加明确的条件判断，确保不会无限触发循环。比如我们可以新增一个标记变量，控制只执行一次：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Understanding Hooks',
    operations: ['One', 'Two'],
    isUpdatedTriggered: false // 新增标记变量
  },
  created: function() {
    console.log('=> ', this.operations)
    this.operations.push('CREATED : ');
  },
  mounted: function() {
    this.operations.push('MOUNTED : ');
  },
  updated: function() {
    // 只在标记为false时执行操作
    if (!this.isUpdatedTriggered) {
      this.operations.push('UPDATED : ');
      this.isUpdatedTriggered = true; // 修改标记，避免重复执行
    }
  },
  destroyed: function() {
    this.operations.push('DESTROYED : ');
  },
})

额外提醒 #

Vue的updated钩子是在组件每次重新渲染完成后都会触发的，所以永远不要在这个钩子里面直接修改响应式数据（除非你有绝对可靠的终止条件），否则大概率会引发无限循环问题。

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