Schoar:Z1an


千秋大业,关键在人,征程再起,继往开来

Vue3中的组件生命周期

  • ~2.83K 字
  1. 1. 前言
  2. 2. 主要生命周期钩子
    1. 2.1. 1.组件创建
    2. 2.2. 2.组件挂载
    3. 2.3. 3.组件更新
    4. 2.4. 4.组件卸载
    5. 2.5. 5.错误
  3. 3. 新增了生命钩子

前言

组件生命周期是 Vue 应用开发的核心概念之一，它描述了组件从创建到销毁的完整过程。理解生命周期钩子不仅可以帮助我们在正确的时机执行代码逻辑，还能优化应用性能，避免常见错误！掌握这些生命周期知识都将使您能够构建更健壮、高效的 Vue 应用程序.

主要生命周期钩子

1.组件创建

setup() ：这是 Vue 3 新增的一个函数，在组件初始化时最先执行，它用于组合式 API 的编写，你可以在其中定义响应式数据、方法。
onBeforeCreate() ：在实例初始化之后，数据观测之前被调用，但由于 setup() 的存在，这个钩子基本不用。
onCreated() : 实例创建完成后调用，此时已完成数据观测，但尚未挂载 DOM，在 Vue 3 中，setup() 可以替代这个钩子的大部分功能。

1
2
3
4
5
6
7
8
import { onMounted }  from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('mounted')
    })
  }
}

2.组件挂载

onBeforeMount() ：在挂载开始之前被调用，此时模板编译已经完成，但 DOM 还未挂载。你可以在这个钩子中做一些最后的准备工作。
onMounted() ：在挂载完成后调用，此时组件已经插入到 DOM 中。你可以在这个钩子中进行一些需要访问 DOM 的操作，比如初始化第三方库、绑定事件等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div ref="myDiv">{{ message }}</div>
</template>

import { ref,onBeforeMount,onMounted }  from 'vue'

export default {
  setup() {
    const message = ref('HelloWorld!');
    const myDiv = ref(null);
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
        console.log('Mounted');
        console.log(myDiv.value); // 可以访问 DOM 元素
    });
  }
}

3.组件更新

onBeforeUpdate() ：在数据发生变化，DOM 重新渲染之前被调用。你可以在这个钩子中访问更新前的 DOM 状态。
onUpdated() ：在数据更新导致的 DOM 重新渲染之后被调用。可以在这个钩子中访问更新后的 DOM 状态，避免修改数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div @click="updateMsg">{{ message }}</div>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue';
const message = ref('HelloWorld');
const updateMsg = () => {
  message.value = 'UpdatedMsg';
};
onBeforeUpdate(() => {
  console.log('BeforeUpdate');
});
</script>

4.组件卸载

onBeforeUnmount() ：在组件卸载之前被调用。你可以在这个钩子中进行一些清理工作，比如取消定时器、解绑事件。
onUnmounted() ：在组件卸载完成后被调用。此时组件的所有子实例和事件监听器、子实例也已经被销毁。

1
2
3
4
5
6
7
8
9
10
11
import { onBeforeUnmount,onUnmounted  }  from 'vue'
export default {
  setup() {
    onBeforeUnmount(() => {
        console.log('Before unmount');
    });
    onUnmounted(() => {
        console.log('Unmounted');
    });
  }
}

5.错误

onErrorCaptured() ：当捕获到一个来自子孙组件的错误时被调用。这个钩子可以用于记录错误信息、提供错误反馈。

1
2
3
4
5
6
7
8
9
10
11
import { onErrorCaptured  }  from 'vue'
export default {
  setup() {
    onErrorCaptured((err, instance, info) => {
        console.log('Error captured:', err);
        console.log('Component instance:', instance);
        console.log('Error info:', info);
        return false; // 阻止错误继续向上传播
    });
  }
}

新增了生命钩子

Vue3引入了两个新的生命周期钩子用于调试：
renderTracked() - 当响应式依赖被追踪时使用。
renderTriggered() - 当响应式依赖触发组件重新渲染时使用。

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,