您现在的位置是：首页 >技术交流 >vue3生命周期函数介绍以及使用网站首页技术交流

生命周期函数介绍以及使用

在 Vue 3 中，生命周期函数的使用方式与 Vue 2 有所不同。Vue 3 推荐使用

主要生命周期函数及其用途

代码演示

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

// 定义响应式数据
const message = ref('初始消息');

// 模拟一个定时器
let timer;

// onBeforeMount 钩子
onBeforeMount(() => {
  console.log('onBeforeMount: 组件即将挂载');
});

// onMounted 钩子
onMounted(() => {
  console.log('onMounted: 组件已挂载');
  // 在组件挂载后启动一个定时器
  timer = setInterval(() => {
    console.log('定时器在运行...');
  }, 1000);
});

// onBeforeUpdate 钩子
onBeforeUpdate(() => {
  console.log('onBeforeUpdate: 组件数据即将更新');
});

// onUpdated 钩子
onUpdated(() => {
  console.log('onUpdated: 组件数据已更新');
});

// onBeforeUnmount 钩子
onBeforeUnmount(() => {
  console.log('onBeforeUnmount: 组件即将卸载');
  // 在组件卸载前清除定时器
  clearInterval(timer);
});

// onUnmounted 钩子
onUnmounted(() => {
  console.log('onUnmounted: 组件已卸载');
});

// 更新消息的方法
const updateMessage = () => {
  message.value = '更新后的消息';
};
</script>

<style scoped>
/* 样式部分 */
</style>

代码解释

1. onBeforeMount：在组件挂载到 DOM 之前触发，这里只是简单打印一条日志。
2. onMounted：组件挂载到 DOM 后触发，启动了一个定时器，每秒打印一条日志。
3. onBeforeUpdate：在组件数据更新之前触发，可用于在更新前获取旧的状态。
4. onUpdated：组件数据更新完成后触发，可用于在更新后对 DOM 进行操作。
5. onBeforeUnmount：在组件卸载之前触发，清除了之前启动的定时器，避免内存泄漏。
6. onUnmounted：组件卸载完成后触发，此时组件已经完全销毁。

在选项式 API 中使用生命周期函数

如果你不使用

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  beforeMount() {
    console.log('beforeMount: 组件即将挂载');
  },
  mounted() {
    console.log('mounted: 组件已挂载');
    this.timer = setInterval(() => {
      console.log('定时器在运行...');
    }, 1000);
  },
  beforeUpdate() {
    console.log('beforeUpdate: 组件数据即将更新');
  },
  updated() {
    console.log('updated: 组件数据已更新');
  },
  beforeUnmount() {
    console.log('beforeUnmount: 组件即将卸载');
    clearInterval(this.timer);
  },
  unmounted() {
    console.log('unmounted: 组件已卸载');
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
    }
  }
};
</script>

<style scoped>
/* 样式部分 */
</style>

以上就是 Vue 3 中生命周期函数的详细介绍及代码演示，你可以根据具体需求在合适的生命周期钩子中执行相应的操作。