如何从原生JavaScript事件监听器中修改Vue数据？

当然有更规范的写法啦！在Vue里处理这种DOM事件回调，有几种比var obj = this更优雅且符合最佳实践的方式，我给你一一说明：

1. 使用ES6箭头函数 #

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是当前的Vue实例），所以可以直接在回调里用this访问packageA：

export default {
  name: "xxx",
  data() {
    return {
      packageA: []
    };
  },
  created: function () {
    document.addEventListener('keyup', (e) => {
      this.packageA.push(e.key)
    });
  }
}

这种写法最简洁，也是现在Vue项目里最常用的方式之一，省去了额外保存实例的步骤。

2. 使用bind()绑定this #

如果你的项目还没用到ES6语法，或者需要兼容旧环境，可以用bind()方法把回调函数的this绑定到Vue实例上：

export default {
  name: "xxx",
  data() {
    return {
      packageA: []
    };
  },
  created: function () {
    document.addEventListener('keyup', function(e) {
      this.packageA.push(e.key)
    }.bind(this));
  }
}

bind(this)会返回一个新函数，这个函数内部的this会固定指向传入的Vue实例，这样就能正常访问packageA了。

3. 抽成组件方法（推荐用于需要清理事件的场景） #

如果你的组件需要在销毁时移除事件监听（避免内存泄漏），最好把回调逻辑抽成组件的methods方法，这样更便于管理：

export default {
  name: "xxx",
  data() {
    return {
      packageA: []
    };
  },
  created: function () {
    document.addEventListener('keyup', this.handleKeyUp);
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听，防止内存泄漏
    document.removeEventListener('keyup', this.handleKeyUp);
  },
  methods: {
    handleKeyUp(e) {
      this.packageA.push(e.key);
    }
  }
}

这种写法的优势在于：

• 方法可以复用，逻辑更清晰
• 能在beforeDestroy钩子中精准移除事件监听，避免无用的事件回调残留

以上几种方式都比var obj = this更符合Vue的规范和现代JavaScript的写法，你可以根据项目的实际情况选择最合适的一种~

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