Vue组件中window.addEventListener('load')等价实现：能否用created/mounted？

完全没问题，你完全可以用Vue的created()或mounted()钩子来实现和window.addEventListener('load')等价的功能，而且这才是更符合Vue开发习惯的做法。

为什么不用window.load？ #

window.load事件会等待页面上所有资源（图片、样式表、脚本等）全部加载完成后才触发，但你的代码只是读取路由的查询参数，这些参数在Vue实例初始化后就已经可用了，根本不需要等整个页面资源加载完毕。用Vue的生命周期钩子会更高效，也更贴合Vue的响应式模型。

等价实现（Options API） #

你可以把逻辑放在created()或mounted()里，甚至可以加个监听器来处理路由参数变化的情况：

export default {
  // 可选：created钩子在实例创建后立即执行，此时路由参数已可用
  created() {
    this.processRouteParams();
  },
  
  // 或者用mounted钩子，适合需要操作DOM的场景（你的场景里两者都可以）
  // mounted() {
  //   this.processRouteParams();
  // },
  
  methods: {
    processRouteParams() {
      // 解构路由查询参数，更简洁
      const { mode, oobCode: actionCode, continueUrl } = this.$route.query;
      
      switch (mode) {
        case 'resetPassword':
          this.handleResetPassword(actionCode, continueUrl);
          break;
        case 'recoverEmail':
          this.handleRecoverEmail(actionCode);
          break;
        // 其他case在这里补充
        default:
          // 处理未知mode的情况（可选）
          break;
      }
    },
    // 假设你的handle函数定义在这里
    handleResetPassword(actionCode, continueUrl) {
      // 你的重置密码逻辑
    },
    handleRecoverEmail(actionCode) {
      // 你的恢复邮箱逻辑
    }
  },
  
  // 可选：如果路由参数可能在组件挂载后变化（比如同路由不同参数），加个监听器
  watch: {
    '$route.query': {
      immediate: true, // 初始化时立即执行一次
      handler() {
        this.processRouteParams();
      }
    }
  }
}

Vue 3 Composition API版本 #

如果用的是Vue 3的Composition API，写法如下：

import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    
    const processRouteParams = () => {
      const { mode, oobCode: actionCode, continueUrl } = route.query;
      
      switch (mode) {
        case 'resetPassword':
          handleResetPassword(actionCode, continueUrl);
          break;
        case 'recoverEmail':
          handleRecoverEmail(actionCode);
          break;
        // 其他case
        default:
          break;
      }
    };
    
    // 挂载后执行
    onMounted(() => {
      processRouteParams();
    });
    
    // 监听路由参数变化
    watch(
      () => route.query,
      () => processRouteParams(),
      { immediate: true } // 可选：初始化时执行
    );
    
    // 定义你的handle函数
    function handleResetPassword(actionCode, continueUrl) {
      // 逻辑
    }
    function handleRecoverEmail(actionCode) {
      // 逻辑
    }
    
    return {};
  }
};

总结 #

• 用created()或mounted()替代window.load完全可行，且更高效。
• 如果需要处理路由参数动态变化的情况，添加watch监听器是最佳实践。
• 这种写法更符合Vue的组件化思想，也更容易维护。

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