vue2生命周期、vue3生命周期、uni-app生命周期

le-cheng / 2023-08-12 / 原文

一、生命周期

Vue 实例有一个完整的生命周期。

也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期

二、vue2生命周期（钩子函数）

（1）钩子函数：

在特定阶段或特定事件发生时被执行的函数
在钩子函数中可以编写逻辑
- 【初始化操作、发送请求、处理DOM、注册事件、挂载之前请求数据、在更新后执行一些额外的逻辑】

（2）常用钩子函数：

beforeCreate	组件实例被创建之初，组件的属性生效之前
created	组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用
beforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子【可多次调用】
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前，即在重新渲染之前进行最后的准备工
updated	组件数据更新之后，重新渲染完成后。此阶段表示Vue实例已经完成了数据更新，并已经重新渲染到DOM
beforeDestory	组件销毁前调用，此阶段用于清理工作，如移除事件监听器或取消定时器。
destoryed	组件销毁后调用，此阶段表示Vue实例已经完全销毁，所有的事件监听器和组件实例都已被移除。
activited	keep-alive 专属，组件被激活时调用
deadctivated	keep-alive 专属，组件被销毁时调用

用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数

（3）包含子组件的父组件从创建到销毁过程中，Vue子组件和父组件生命周期的执行顺序

1）加载渲染过程：

父组件 beforeCreate
父组件 created
父组件 beforeMount |
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted |
父组件 mounted

2）更新过程

父组件 beforeUpdate |
子组件 beforeUpdate
子组件 updated |
父组件 updated

3）销毁过程

父组件 beforeDestroy
子组件 beforeDestroy |
子组件 destroyed
父组件 destoryed |

（4）举个例子

new Vue({
  el: '#app',
  data: {
    message: '',
    userData: null
  },
  beforeCreate() {
    console.log('beforeCreate hook');
    // 发送初始化请求获取初始消息，并将其存储在message属性中。
    axios.get('/api/initialize').then(response => {
      this.message = response.data.message;
    });
  },
  created() {
    console.log('created hook');
    // 注册事件，注册了一个滚动事件的监听器
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeMount() {
    console.log('beforeMount hook');
    // 挂载之前请求数据，发送了一个请求来获取用户数据，并将其存储在userData属性中
    axios.get('/api/userData').then(response => {
      this.userData = response.data;
    });
  },
  mounted() {
    console.log('mounted hook');
    // 执行DOM操作，将特定元素的文字颜色设置为红色
    this.$refs.myElement.style.color = 'red';
  },
  beforeUpdate() {
    console.log('beforeUpdate hook');
    // 发送更新请求，将userData数据发送至后台
    axios.post('/api/update', { data: this.userData });
  },
  updated() {
    console.log('updated hook');
    // 在更新后执行额外逻辑，例如调用了handleUpdatedLogic方法
    this.handleUpdatedLogic();
  },
  destroyed() {
    console.log('destroyed hook');
    // 移除事件监听器，移除了之前注册的滚动事件的监听器
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
//包含了各种方法的对象。您可以在methods对象中定义组件中需要使用的方法;这些方法可以在模板中通过事件绑定或其他方式进行调用
    handleScroll() {
      // 处理滚动事件
      console.log('Scrolling...');
    },
    handleUpdatedLogic() {
      // 更新后执行的额外逻辑
      console.log('Additional logic after update');
    }
  }
});

三、vue3生命周期（组合式API）

（1）组合式API：

不是通过声明式方式进行声明，而是在setup()函数中调用相应的函数来使用

setup()	始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
onBeforeMount()	组件挂载到节点上之前执行的函数
onMounted() :	组件挂载完成后执行的函数
onBeforeUpdate()	组件更新之前执行的函数
onUpdated():	组件更新完成之后执行的函数
onBeforeUnmount()	组件卸载之前执行的函数
onUnmounted():	组件卸载完成后执行的函数
onActivated()	被包含在中的组件，会多出两个生命周期钩子函数，被激活时执行；
onDeactivated()	比如从 A 组件，切换到 B 组件，A 组件消失时执行；
onErrorCaptured()	当捕获一个来自子孙组件的异常时激活钩子函数。

其他组合式API：

watch()用于监听响应式数据的变化
provide和inject用于提供和注入依赖等。

（2）举个例子：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    // 组件挂载之前执行的函数
    onBeforeMount(() => {
      console.log('Component is about to be mounted');
    });

    // 组件挂载完成后执行的函数
    onMounted(() => {
      console.log('Component has been mounted');
    });

    // 组件更新之前执行的函数
    onBeforeUpdate(() => {
      console.log('Component is about to update');
    });

    // 组件更新完成后执行的函数
    onUpdated(() => {
      console.log('Component has been updated');
    });

    // 组件卸载之前执行的函数
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    // 组件卸载完成后执行的函数
    onUnmounted(() => {
      console.log('Component has been unmounted');
    });

    // 被激活时执行的函数，例如从父组件切换到子组件时
    onActivated(() => {
      console.log('Component has been activated');
    });

    // 组件不再处于活动状态时执行的函数，例如从子组件切换到父组件时
    onDeactivated(() => {
      console.log('Component has been deactivated');
    });

    // 当捕获来自子组件的异常时激活的函数
    onErrorCaptured((error, instance, info) => {
      console.error('Error captured:', error);
    });

    // 自定义方法：打印一条消息
    const printMessage = (message) => {
      console.log(message);
    };

    return {
      printMessage
    };
  }
};

四、uni-app生命周期

1、应用程序的生命周期方法：定义在根组件app.vue中

onLaunch() 应用程序启动
onShow() 应用程序显示
onHide() 应用程序隐藏

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 应用程序启动时执行的函数
    this.onLaunch();
  },
  mounted() {
    // 应用程序显示时执行的函数
    this.onShow();
  },
  beforeUnmount() {
    // 应用程序隐藏时执行的函数
    this.onHide();
  },
  methods: {
    onLaunch() {
      console.log('Application launched');
    },
    onShow() {
      console.log('Application shown');
    },
    onHide() {
      console.log('Application hidden');
    }
  }
};
</script>

2、页面的生命周期方法--仿微信小程序

onLoad() 页面挂载完成
onShow() 页面被显示
onReady() 页面可以交互
onHide() 页面被隐藏
onUnload() 页面被卸载

onPageScroll() 页面发生滚动
onReachBottom() 页面滚动触底
onPullDownRefresh() 页面下拉刷新

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyPage',

  // 页面数据
  data() {
    return {
      message: 'Hello Vue!',
    };
  },

  // 页面挂载完成时执行的函数
  mounted() {
    this.onLoad();
  },

  // 页面被显示时执行的函数
  activated() {
    this.onShow();
  },

  // 页面被隐藏时执行的函数
  deactivated() {
    this.onHide();
  },

  // 页面被卸载时执行的函数
  beforeUnmount() {
    this.onUnload();
  },

  methods: {
    // 页面挂载完成时执行的逻辑
    onLoad() {
      console.log('Page loaded');
    },

    // 页面被显示时执行的逻辑
    onShow() {
      console.log('Page shown');
    },

    // 页面被隐藏时执行的逻辑
    onHide() {
      console.log('Page hidden');
    },

    // 页面被卸载时执行的逻辑
    onUnload() {
      console.log('Page unloaded');
    },

    // 页面发生滚动时执行的逻辑
    onPageScroll() {
      console.log('Page scrolled');
    },

    // 页面滚动触底时执行的逻辑
    onReachBottom() {
      console.log('Page reached bottom');
    },

    // 页面下拉刷新时执行的逻辑
    onPullDownRefresh() {
      console.log('Page pulled down for refresh');
    },
  },

  // 监听页面滚动事件
  created() {
    window.addEventListener('scroll', this.onPageScroll);
  },

  // 移除页面滚动事件监听
  beforeUnmount() {
    window.removeEventListener('scroll', this.onPageScroll);
  },
};
</script>