Vue 生命周期钩子函数使用笔记

当我们将这些生命周期钩子函数写在自定义Hooks里面时，意味着只要组件引用了这个Hooks，相应的生命周期事件就会自动绑定到该组件上。

生命周期钩子示例代码

挂载阶段

  • 挂载前

    1
    2
    3
    onBeforeMount(() => {
      // console.log('挂载前')
    });

  • 挂载完毕

    1
    2
    3
    onMounted(() => {
      console.log('子---挂载完毕');
    });

更新阶段

  • 更新前

    1
    2
    3
    onBeforeUpdate(() => {
      // console.log('更新前')
    });

  • 更新完毕

    1
    2
    3
    onUpdated(() => {
      // console.log('更新完毕')
    });

卸载阶段

  • 卸载前

    1
    2
    3
    onBeforeUnmount(() => {
      // console.log('卸载前')
    });

  • 卸载完毕

    1
    2
    3
    onUnmounted(() => {
      // console.log('卸载完毕')
    });