DOMContentLoaded事件监听器在Vue.js实例中的放置位置咨询

首先明确：Vue本身会自动处理DOM就绪的问题，你原来手动监听DOMContentLoaded的代码，完全可以用Vue的生命周期钩子替代，不用单独写了。

分两种情况处理：

• 如果你的// do some stuff是和Vue实例相关的操作（比如修改data里的属性、调用methods里的方法、操作Vue挂载后的DOM），直接把代码放到Vue实例的mounted钩子中：

  window.app = new Vue({
    el: '#app',
    data: {
      some_propery_1: 0,
      some_propery_2: []
    },
    methods: {
      // 可以把业务逻辑拆成方法放在这里
    },
    async mounted() { // 因为原代码是async函数，这里也可以加async
      // 原来// do some stuff的内容直接写在这里
      // 比如调用方法：this.yourMethod()，或者修改数据：this.some_propery_1 = 10
    }
  })
  

  mounted钩子触发时，Vue实例已经挂载到页面的#app元素上，此时DOM完全就绪，和你原来监听DOMContentLoaded的时机一致，而且能直接通过this访问Vue实例的所有属性和方法，更符合Vue的开发逻辑。

• 如果你的// do some stuff是完全和Vue无关的独立操作（比如操作Vue实例外的DOM、加载非Vue依赖的资源），可以单独放在Vue实例代码的后面，因为Vue实例初始化时已经确保DOM就绪了，没必要再监听DOMContentLoaded；当然你硬要保留原来的监听也可以，但完全没必要多此一举。

另外补充：Vue实例如果不指定el，而是后续调用$mount('#app')，那也建议在mounted钩子中处理DOM相关操作，或者确保调用$mount时DOM已经就绪。

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