vue3新手入门(8)一文了解vue3生命周期

今天学习下vue3的生命周期，vue 3的生命周期是指Vue实例从创建到销毁的过程，它包含了一系列的阶段和对应的生命周期钩子函数，允许开发者在这些特定的阶段执行自定义的操作。

生命周期主要有四个阶段：创建，挂载，更新，销毁

vue3生命周期主要有以下几个函数：

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

以下用一个常见的示例，用户信息编辑组件来演示下生命周期的使用过程

假设我们有一个UserProfile.vue组件，它用于展示和编辑用户的姓名和邮箱。这个组件会在用户加载页面时从API获取用户信息，并在用户修改信息后发送更新请求。

<template>  
  <div>  
    <h1>用户信息</h1>  
    <p>姓名: <input v-model="user.name" /></p>  
    <p>邮箱: <input v-model="user.email" /></p>  
    <button @click="updateUser">更新信息</button>  
  </div>  
</template>  
  
<script>  
import { ref, onBeforeMount,onMounted,onBeforeUpdate, onUpdated, onUnmounted } from 'vue';   
  
export default {  
  name: 'UserProfile',  
  setup() {  
    const user = ref({  
      name: '',  
      email: ''  
    });  
  
    // 模拟从API获取用户信息  
    const fetchUser = async () => {  
      // 这里用setTimeout模拟异步请求  
      setTimeout(() => {  
        // 假设这是从API获取的数据  
        user.value = {  
          name: '张三',  
          email: 'zhangsan@example.com'  
        };  
      }, 1000);  
    };  
     console.log('setup')
  // 生命周期钩子
  onBeforeMount(()=>{
    console.log('挂载之前')
  })

  onBeforeUpdate(()=>{
    console.log('更新之前')

  })
  
    // 组件挂载后获取用户信息  
    onMounted(() => {  
      fetchUser();  
      console.log('挂载完毕')；
    });  
  
    // 更新用户信息的方法  
    const updateUser = async () => {  
      // 这里简单模拟发送更新请求  
      console.log('Updating user:', user.value);  
      // 在实际应用中，这里会发送一个请求到服务器  
    };  
  
    // 组件更新后，可以在这里执行一些操作，比如记录日志  
    onUpdated(() => {  
      console.log('User data updated:', user.value);  
    });  
  
    // 组件卸载时执行清理操作  
    onUnmounted(() => {  
      console.log('UserProfile component unmounted');  
      // 如果有需要清理的资源（如定时器、事件监听器等），可以在这里进行  
    });  
  
    // 返回给模板的响应式数据和函数  
    return {  
      user,  
      updateUser  
    };  
  }  
};  
</script>  
  
<style scoped>  
/* 样式省略 */  
</style>

运行效果如下，分别依次执行了setup，挂载之前，挂载完毕，更新之前，更新

• 使用ref创建了一个响应式的user对象，用于存储用户信息。
• fetchUser函数模拟了从API获取用户信息的异步过程。
• onMounted钩子在组件挂载到DOM后执行，调用了fetchUser函数来填充用户信息。
• updateUser函数模拟了更新用户信息的操作，实际应用中应该包含发送HTTP请求到服务器的逻辑。
• onUpdated钩子在组件的响应式状态更新后执行，这里仅用于打印日志，但可以用于执行其他依赖于新状态的逻辑。
• onUnmounted钩子在组件卸载时执行，用于执行清理操作，如取消定时器、移除事件监听器等。

值得注意的是，父子组件的生命周期执行顺序是深度递归执行的。首先父组件开始执行其生命周期，当遇到子组件时，会暂停父组件的生命周期执行，转而执行子组件的生命周期，直到子组件的生命周期执行完毕，再回到父组件继续执行其剩余的生命周期。