vue2生命周期使用场景-易微帮

- beforeCreate：

初始化阶段，实例和属性尚未建立，不常用。

- created：

实例已创建，属性已绑定，常用于初始化数据、发送网络请求。

created() {  
  this.initData();  
},  
methods: {  
  initData() {  
    this.list = [];  
    this.loading = true;  
    this.fetchData();  
  },  
  fetchData() {  
    // 发送网络请求获取数据  
  }  
}

- beforeMount：

模板编译成虚拟 DOM，即将挂载，不常用。

- mounted：

模板已挂载到页面，可访问和操作 DOM，常用于启动第三方插件、绑定事件监听器。同步可以获取dom，如果先子组件请求后父组件请求。
1.启动第三方插件：

mounted() {  
  this.$nextTick(() => {  
    // 确保 DOM 更新完成后再初始化插件  
    new Swiper('.swiper-container', { /* Swiper 配置项 */ });  
  });  
}

2.绑定事件监听器：

mounted() {  
  window.addEventListener('resize', this.handleResize);  
},  
beforeDestroy() {  
  window.removeEventListener('resize', this.handleResize);  
},  
methods: {  
  handleResize() {  
    // 处理窗口大小变化  
  }  
}

- beforeUpdate：

数据更新前，可访问更新前的 DOM，不常用。

- updated：

数据更新后，DOM 已更新，可用于重新计算位置或尺寸。

updated() {  
  this.$nextTick(() => {  
    // 确保 DOM 更新完成后再计算尺寸或位置  
    this.calculatePosition();  
  });  
},  
methods: {  
  calculatePosition() {  
    // 计算元素的尺寸或位置  
  }  
}

- beforeDestroy：

实例即将销毁，常用于清理定时器、解绑事件。

//清理定时器、解绑事件：
beforeDestroy() {  
  clearInterval(this.timer);  
  window.removeEventListener('resize', this.handleResize);  
},  
data() {  
  return {  
    timer: null,  
  };  
},  
// ... 其他代码

- destroyed：

实例已销毁，彻底清理资源。
关闭页面记录视频播放的时间,初始化的时候从上一次的历史开始播放

//彻底清理资源：
destroyed() {  
  // 清理组件创建时分配的所有资源  
  this.cleanup();  
},  
methods: {  
  cleanup() {  
    // 清理操作，比如销毁插件实例、解除数据绑定等  
  }  
}

- activated

===> 判断id是否相等，如果不相同发起请求
重新获取数据、重置定时器、重新绑定事件等

- deactivated

===&gt；当组件不再活跃时，你可以在这里清理一些资源
取消请求、清除定时器、解绑事件等

<template>  
  <div>  
    <h1>My Cached Component</h1>  
    <!-- 组件的其他内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'MyCachedComponent',  
  activated() {  
    console.log('MyCachedComponent was activated!');  
    // 当组件被激活时，你可以在这里执行一些操作  
    // 比如，重新获取数据、重置定时器、重新绑定事件等  
  },  
  deactivated() {  
    console.log('MyCachedComponent was deactivated!');  
    // 当组件不再活跃时，你可以在这里清理一些资源  
    // 比如，取消请求、清除定时器、解绑事件等  
  },  
  // ... 其他选项和生命周期钩子  
};  
</script>

在路由中的使用在你的路由配置中，你不需要特别指定某个路由是否使用，因为这是在模板层面决定的。你只需要在模板中包裹组件即可：

<template>  
  <div id="app">  
    <keep-alive>  
      <router-view></router-view>  
    </keep-alive>  
  </div>  
</template>

<script>  
// ...  
</script>

但如果你想对某些路由使用 <keep-alive>，而对其他不使用，你可以结合 <router-view> 的 key 属性来实现：

<template>  
  <div id="app">  
    <keep-alive>  
      <router-view v-if="$route.meta.keepAlive"></router-view>  
    </keep-alive>  
    <router-view v-if="!$route.meta.keepAlive"></router-view>  
  </div>  
</template>

<script>  
// ...  
</script>

然后，在你的路由配置中为每个路由添加一个 meta 字段来指定是否使用 <keep-alive>：

const router = new VueRouter({  
  routes: [  
    {  
      path: '/cached',  
      component: () => import('./MyCachedComponent.vue'),  
      meta: { keepAlive: true }  
    },  
    {  
      path: '/not-cached',  
      component: () => import('./MyNotCachedComponent.vue'),  
      meta: { keepAlive: false }  
    }  
    // ... 其他路由  
  ]  
});

这样，只有标记为 keepAlive: true 的路由组件才会被 <keep-alive> 包裹，并在它们被切换时触发 activated 和 deactivated 钩子。

vue2生命周期使用场景