首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue中activated和deactivated生命周期钩子在keep-alive的使用

Vue中activated和deactivated生命周期钩子在keep-alive组件中的使用详解

2025-07-26 11:28:49 作者：前端布洛芬

Vue中keep-alive的activated和deactivated钩子用于管理缓存组件的激活与停用状态,提升性能,created初始化数据,mounted操作DOM,其他常用钩子包括beforeCreate、beforeMount、beforeUpdate、updated、beforeUnmount和unmounted

Vue activated和deactivated生命周期钩子在keep-alive中的作用

在Vue里，keep-alive 组件就像是一个“记忆宝盒”，它能把组件的状态保存起来，避免组件在切换时反复创建和销毁，这样可以大大提升性能。而 activated 和 deactivated 这两个生命周期钩子，就像是“记忆宝盒”的开关助手，在组件进入和离开这个“宝盒”时发挥着重要作用。

1.activated生命周期钩子

当使用 keep-alive 包裹的组件被激活（也就是重新显示在页面上）时，activated 钩子就会被触发。这就好比一个人从沉睡中被唤醒，要开始干活了。下面是一个简单的例子：

<template>
  <!-- 这是组件的模板部分 -->
  <div>
    <h1>这是一个被 keep-alive 包裹的组件</h1>
  </div>
</template>

<script>
export default {
  // 组件被激活时触发的钩子函数
  activated() {
    // 这里可以写一些组件被激活时要执行的代码，比如重新获取数据
    console.log('组件被激活啦！');
    // 可以在这里发送请求获取最新的数据
    // this.fetchData(); 
  },
  methods: {
    // 模拟获取数据的方法
    fetchData() {
      console.log('正在获取数据...');
    }
  }
}
</script>

在这个例子中，当这个组件被激活时，控制台就会输出“组件被激活啦！”，你还可以在 activated 钩子中调用 fetchData 方法去重新获取最新的数据。

2.deactivated生命周期钩子

当使用 keep-alive 包裹的组件被停用（也就是从页面上隐藏）时，deactivated 钩子就会被触发。这就好比一个人要去休息了，得把手上的活先停下来。下面是对应的例子：

<template>
  <!-- 这是组件的模板部分 -->
  <div>
    <h1>这是一个被 keep-alive 包裹的组件</h1>
  </div>
</template>

<script>
export default {
  // 组件被停用（隐藏）时触发的钩子函数
  deactivated() {
    // 这里可以写一些组件被停用时要执行的代码，比如停止定时器
    console.log('组件被停用啦！');
    // 可以在这里清除定时器
    // clearInterval(this.timer); 
  },
  data() {
    return {
      // 模拟一个定时器
      timer: null
    };
  },
  mounted() {
    // 在组件挂载时启动定时器
    this.timer = setInterval(() => {
      console.log('定时器在运行...');
    }, 1000);
  }
}
</script>

在这个例子中，当组件被停用（隐藏）时，控制台会输出“组件被停用啦！”，你还可以在 deactivated 钩子中清除定时器，避免不必要的资源浪费。

3. 结合keep-alive使用的完整示例

下面是一个完整的示例，展示了如何在 keep-alive 中使用 activated 和 deactivated 钩子：

<template>
  <div>
    <!-- 这里使用 keep-alive 包裹组件 -->
    <keep-alive>
      <!-- 通过 v-if 控制组件的显示和隐藏 -->
      <component-a v-if="showComponentA"></component-a>
      <component-b v-else></component-b>
    </keep-alive>
    <!-- 切换组件的按钮 -->
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      // 控制组件 A 是否显示
      showComponentA: true
    };
  },
  methods: {
    // 切换组件的方法
    toggleComponent() {
      this.showComponentA = !this.showComponentA;
    }
  }
}
</script>

在 ComponentA.vue 和 ComponentB.vue 中，你可以分别定义 activated 和 deactivated 钩子，来处理组件激活和停用的逻辑。

总结一下，activated 和 deactivated 这两个生命周期钩子在 keep-alive 组件中非常有用，它们能让你在组件进入和离开“记忆宝盒”时，灵活地执行一些必要的操作，提升应用的性能和用户体验。

解释一下Vue中created和mounted生命周期钩子函数的作用

在Vue.js里，生命周期钩子函数就像是一场戏剧中的各个关键场次，每个钩子都有其独特的作用，在特定的时间点被触发。

created 和 mounted 这两个生命周期钩子函数在Vue组件的生命周期中扮演着重要角色，下面来详细解释它们的作用。

1.created生命周期钩子函数

created 钩子函数会在Vue实例已经创建完成之后被立即调用。在这个阶段，实例已经完成了数据观测、property 和 method 的计算、watch/event 事件回调的配置等。然而，挂载阶段还没有开始，$el 属性目前不可用。

可以把 created 阶段想象成戏剧的筹备阶段，演员（数据和方法）都已经就位，但舞台（DOM）还没搭建好。这个阶段适合进行一些数据的初始化操作，比如发送HTTP请求来获取数据。

以下是一个简单的示例：

<template>
  <div>
    <!-- 这里展示从接口获取的数据 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个变量来存储从接口获取的数据
      message: ''
    };
  },
  created() {
    // 在 created 钩子中发送请求获取数据
    console.log('组件已创建，开始获取数据...');
    // 模拟一个异步请求
    setTimeout(() => {
      this.message = '这是从接口获取的数据';
    }, 1000);
  }
};
</script>

在这个例子中，created 钩子函数被触发后，会模拟一个异步请求去获取数据，并将数据赋值给 message 变量。由于这个阶段数据观测已经完成，当数据更新时，Vue会自动更新DOM。

2.mounted生命周期钩子函数

mounted 钩子函数在挂载完成后被调用，也就是Vue实例已经将其模板渲染成真实的DOM并插入到页面中。此时，$el 属性已经可用，可以直接访问DOM元素。

可以把 mounted 阶段想象成戏剧正式开演，舞台（DOM）已经搭建好，演员（数据和方法）可以在上面尽情表演了。这个阶段适合进行一些需要操作DOM的初始化工作，比如初始化第三方插件。

以下是一个示例：

<template>
  <div>
    <!-- 这里有一个需要初始化的 DOM 元素 -->
    <div id="my-element">这是一个需要初始化的元素</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在 mounted 钩子中操作 DOM
    console.log('组件已挂载，开始操作 DOM...');
    const element = document.getElementById('my-element');
    // 修改 DOM 元素的样式
    element.style.color = 'red';
  }
};
</script>

在这个例子中，mounted 钩子函数被触发后，会获取 id 为 my-element 的DOM元素，并将其文字颜色修改为红色。因为在这个阶段，DOM已经渲染完成，所以可以安全地进行DOM操作。

3.created和mounted的区别和使用场景总结

区别：

created 阶段主要是数据的初始化，此时DOM还未渲染，不能进行DOM操作。
mounted 阶段DOM已经渲染完成，可以进行DOM操作。

使用场景：

created 适合进行数据的初始化，如发送HTTP请求获取数据、初始化全局变量等。
mounted 适合进行需要操作DOM的初始化工作，如初始化第三方插件、绑定事件监听器等。

通过合理使用 created 和 mounted 生命周期钩子函数，可以更好地控制组件的初始化过程，提升应用的性能和用户体验。

Vue中还有哪些常用的生命周期钩子函数？

除了 created 和 mounted，Vue里还有不少常用的生命周期钩子函数，它们在组件生命周期的不同阶段发挥作用。下面为你详细介绍：

1.beforeCreate

触发时机：在实例初始化之后，数据观测和 event/watcher 事件配置之前被调用。
作用：这个阶段组件实例刚刚被创建，数据和方法都还没初始化，一般用途较少。不过你可以在此处添加一些全局的初始化逻辑。

示例代码：

<template>
  <div></div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('组件实例刚开始创建，数据和方法都未初始化');
  }
};
</script>

2.beforeMount

触发时机：在挂载开始之前被调用，此时模板编译/挂载已经完成，但还未将编译好的DOM插入到页面中。
作用：可以在这个阶段对模板数据进行最后的修改，不过由于DOM还未插入，所以不能进行DOM操作。

示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  beforeMount() {
    console.log('模板编译完成，DOM 还未插入');
    this.message = '修改后的消息';
  }
};
</script>

3.beforeUpdate

触发时机：在数据更新时，DOM 重新渲染和打补丁之前被调用。
作用：当组件的数据发生变化，在DOM更新之前触发该钩子，你可以在这个阶段获取更新前的数据状态，进行一些数据处理操作。

示例代码：

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  beforeUpdate() {
    console.log('数据已更新，DOM 即将更新');
  }
};
</script>

4.updated

触发时机：在数据更改导致的DOM更新完成之后被调用。
作用：当数据更新且DOM重新渲染完成后触发该钩子，你可以在这个阶段进行一些依赖于更新后DOM的操作，比如获取更新后的DOM元素尺寸。

示例代码：

<template>
  <div>
    <button @click="changeMessage">修改消息</button>
    <p ref="messageRef">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    };
  },
  methods: {
    changeMessage() {
      this.message = '新消息';
    }
  },
  updated() {
    console.log('DOM 已更新');
    console.log('更新后的 DOM 元素内容:', this.$refs.messageRef.textContent);
  }
};
</script>

5.beforeDestroy（Vue 2）/beforeUnmount（Vue 3）

触发时机：在实例销毁（Vue 2）或卸载（Vue 3）之前被调用。此时实例仍然完全可用。
作用：可以在这个阶段进行一些清理工作，比如清除定时器、取消事件监听等，避免内存泄漏。

示例代码（Vue 3）：

<template>
  <div></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from 'vue';

let timer;
onMounted(() => {
  timer = setInterval(() => {
    console.log('定时器在运行');
  }, 1000);
});

onBeforeUnmount(() => {
  console.log('组件即将卸载，清除定时器');
  clearInterval(timer);
});
</script>

6.destroyed（Vue 2）/unmounted（Vue 3）

触发时机：在实例销毁（Vue 2）或卸载（Vue 3）之后被调用。此时所有的事件监听器和子实例都已经被销毁。
作用：一般用于确认组件已经完全销毁，进行一些最终的清理操作。

示例代码（Vue 3）：

<template>
  <div></div>
</template>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('组件已卸载');
});
</script>

这些生命周期钩子函数能帮助你在组件的不同阶段执行特定的操作，从而更好地控制组件的行为和状态。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

Vue中activated和deactivated生命周期钩子在keep-alive组件中的使用详解

Vue activated和deactivated生命周期钩子在keep-alive中的作用

1.activated生命周期钩子

2.deactivated生命周期钩子

3. 结合keep-alive使用的完整示例

解释一下Vue中created和mounted生命周期钩子函数的作用

1.created生命周期钩子函数

2.mounted生命周期钩子函数

3.created和mounted的区别和使用场景总结

Vue中还有哪些常用的生命周期钩子函数？

1.beforeCreate

2.beforeMount

3.beforeUpdate

4.updated

5.beforeDestroy（Vue 2）/beforeUnmount（Vue 3）

6.destroyed（Vue 2）/unmounted（Vue 3）

总结

您可能感兴趣的文章: