Vue.js组件created钩子重复触发，是否有单次触发专属钩子？

嘿，这个场景我太熟悉了！路由切换时组件会被销毁再重建，导致created/mounted这类钩子每次切换都跑，确实挺闹心的。下面给你几个不用写冗余代码的实用解决方案：

方案一：用官方的<keep-alive>（最推荐） #

这是Vue官方专为组件缓存设计的方案，包裹路由视图后，组件会被缓存起来，不会每次切换都销毁重建，自然created/mounted就只触发一次了。

用法示例： #

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 用keep-alive包裹路由视图，实现组件缓存 -->
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</div>

设置后，组件的created只会在第一次渲染时触发；切换路由时组件不会被销毁，而是触发activated钩子（每次激活组件时执行）。如果需要在切换时做状态更新之类的逻辑，把代码移到activated里就行，初始化逻辑留在created就好。

方案二：自定义全局Mixin实现单次触发钩子 #

如果不想缓存组件（比如某些组件每次切换都需要重置状态，但有一段初始化逻辑只想执行一次），可以写一个全局Mixin，封装出firstCreated、firstMounted这类单次触发的钩子，所有组件都能复用。

代码示例： #

// 全局注册Mixin，所有组件自动拥有单次触发钩子
Vue.mixin({
  created() {
    // 检测组件是否定义了firstCreated，且未执行过
    if (this.$options.firstCreated && !this._isFirstCreated) {
      this._isFirstCreated = true;
      this.$options.firstCreated.call(this);
    }
  },
  mounted() {
    if (this.$options.firstMounted && !this._isFirstMounted) {
      this._isFirstMounted = true;
      this.$options.firstMounted.call(this);
    }
  }
});

// 组件中直接使用自定义的单次钩子
Vue.component('Foo', {
  template: '<div>Foo</div>',
  firstCreated() {
    console.log('Foo组件只执行一次的初始化逻辑');
  }
});

Vue.component('Bar', {
  template: '<div>Bar</div>',
  firstMounted() {
    console.log('Bar组件只执行一次的挂载逻辑');
  }
});

这样每个组件只要定义firstCreated或firstMounted，就能实现单次触发，不用每个组件都写重复的判断逻辑，完美避免冗余代码。

方案三：组件内加标记（适合单个组件特殊场景） #

如果只是个别组件需要，也可以直接在组件的data里加个标记，手动控制逻辑只执行一次：

export default {
  data() {
    return {
      _hasInitialized: false
    }
  },
  created() {
    if (!this._hasInitialized) {
      console.log('只执行一次的初始化逻辑');
      this._hasInitialized = true;
    }
  }
}

不过这个方案需要每个组件都写标记，不如前两个方案优雅，适合临时解决个别组件的问题。

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