vue3.x之生命周期

vue3中的生命周期和vue2的生命周期不一样。主要差异就是多了一个setup钩子，取代了之前的creat相关的钩子。而且不再有destroy相关的生命周期了，取而代之的是unmount相关的生命周期。

生命周期如图所示：

setup

setup是vue3新出来的概念，是组合函数里面的一个生命周期钩子，这个钩子函数中的代码是最先执行的，而且是在create阶段之前执行的。在这个阶段创建data和method。相当于是vue2的create阶段。

//👀:需要什么导入什么
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.打印调用时机
    console.log('setup调用');

    //2.生命周期钩子
    onBeforeMount(() => {
      console.log('onBeforeMount调用了');
    }),

      onMounted(() => {
        console.log('onMounted调用了');
      }),

      onBeforeUpdate(() => {
        console.log('onBeforeUpdate调用了');
      }),

      onUpdated(() => {
        console.log('onUpdated调用了');
      }),

      onBeforeUnmount(() => {
        console.log('onBeforeUnmount调用了');
      }),

      onUnmounted(() => {
        console.log('onUnmounted调用了');
      })
    return {}
  }
}

效果如下：

❗️此时在setup中定义的所有内容都会在这个阶段执行。

beforeMount

注册一个钩子，在组件被挂载之前被调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

<template>
  <div class="hello">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateInfo">修改信息</button>
  </div>
</template>

<script setup> /*setup语法糖*/
import { onBeforeMount } from 'vue';
import { updateData } from '../hooks/updateData';
const { fullname, person, updateInfo } = updateData();

console.log('setup');

onBeforeMount(() => {
  const dom = document.querySelector('.hello');
  console.log('beforeMount', dom);
})
</script>

效果如下：

 

mounted

注册一个回调函数，在组件挂载完成后执行。 组件在以下情况下被视为已挂载：

其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
其自身的 DOM 树已经创建完成并插入了父容器中。

⚠️注意：仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

<template>
  <div class="hello">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateInfo">修改信息</button>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted } from 'vue';
import { updateData } from '../hooks/updateData';
const { fullname, person, updateInfo } = updateData();

console.log('setup');

onBeforeMount(() => {
  const dom = document.querySelector('.hello');
  console.log('beforeMount', dom);
});
onMounted(() => {
  const dom = document.querySelector('.hello');
  console.log('mounted', dom);
})
</script>

效果如下：

beforeUpdate

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

<template>
  <div class="hello" :class="className">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateName">修改信息</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate } from 'vue';
import { updateData } from '../hooks/updateData';
const { fullname, person } = updateData();

console.log('setup');
const className = ref('');

const updateName = () => {
  className.value = 'test';
}

onBeforeMount(() => {
  const dom = document.querySelector('.hello');
  console.log('beforeMount', dom);
});
onMounted(() => {
  const dom = document.querySelector('.hello');
  console.log('mounted', dom);
});
onBeforeUpdate(() => {
  const dom = document.querySelector('.test');
  console.log('beforeUpdate', dom);
})
</script>

效果如下：

updated

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。 父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

<template>
  <div class="hello" :class="className">
    <div>姓名：{{fullname}}</div>
    <div>年龄：{{person.age}}</div>
    <div>朋友：{{person.friend.name}}-{{person.friend.age}}</div>
    <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
      <div>{{item}}</div>
    </div>
    <button @click="updateName">修改信息</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, nextTick } from 'vue';
import { updateData } from '../hooks/updateData';
const { fullname, person } = updateData();

console.log('setup');
const className = ref('');

const updateName = () => {
  className.value = 'test';
}

onBeforeMount(() => {
  const dom = document.querySelector('.hello');
  console.log('beforeMount', dom);
});
onMounted(() => {
  const dom = document.querySelector('.hello');
  console.log('mounted', dom);
});
onBeforeUpdate(() => {
  const dom = document.querySelector('.test');
  console.log('beforeUpdate', dom);
});
onUpdated(() => {
  nextTick(() => {
    const dom = document.querySelector('.test');
    console.log('Updated', dom);
  })
})
</script>

效果如下：

beforeUnmount

注册一个钩子，在组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, nextTick, onBeforeUnmount } from 'vue'
onBeforeUnmount(() => {
  const dom = document.querySelector('.hello');
  console.log('beforeUnmount', dom);
})

unmounted

组件实例被卸载之后调用。

onUnmounted(() => {
  console.log('unmount');
});