vue(九) 生命周期 v3.0和v2.0对比,父子组件生命周期的执行顺序

文章目录

生命周期
vue2.0生命周期
- 1.图示
- 2.生命周期解释说明
- 3.代码示例
vue3.0生命周期
- 1.图示
- 2.生命周期解释说明
- 3.代码示例
父子组件中生命周期执行顺序
v.3和v2.0生命周期对比

生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，在特定阶段运行自己的代码。

vue2.0生命周期

1.图示

请添加图片描述

2.生命周期解释说明

vue2在第一次页面加载会触发beforeCreate created beforeMount mounted四个钩子函数，DOM渲染在mounted这个周期就已经完成

**创建阶段：从创建Vue实例开始到模版渲染成HTML结束
- beforeCreate：在实例被创建之初，完成数据观测和event/eventBus事件配置等初始化任务之前调用。
- created：实例已经完成了数据观测等初始化任务，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，DOM元素并没有生成，且 $el property 目前尚不可用，无法访问。
- beforeMount：在DOM挂载之前调用，在此期间可以对DOM进行处理，但还未能访问到DOM元素，相关的 render 函数首次被调用，此时是虚拟DOM。该钩子在服务器端渲染期间不被调用。
- mounted：DOM挂载完成后调用，可以访问到DOM元素、实例属性和方法，并可以与后端请求数据和操作DOM。注意：mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick
更新阶段： 当组件依赖的数据发生变化时，需要重新渲染组件，这个过程也涉及到一系列的生命周期函数
- beforeUpdate：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。注：该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
- updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  
  当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。
  然而在大多数情况下，应该避免在此期间更改状态。
  如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
  注意：updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick
卸载阶段： 当组件不再需要的时候，需要进行卸载操作，也会触发一系列的生命周期函数：
- beforeDestroy：在实例销毁之前调用。这个阶段可以进行一些清除工作，比如清除事件监听器或取消定时器。
- destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
**KeepAlives缓存生命周期：**当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
- deactivated 被 keep-alive 缓存的组件失活时调用。
- activated 被 keep-alive 缓存的组件激活时调用。
组件中捕获错误周期： 当捕获一个来自子孙组件的异常时激活钩子函数。
- errorCaptured：在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
可以在此钩子中修改组件的状态。
因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

3.代码示例

<template>
  <div>
    <h2>{{title}}</h2>
    <ul>
        <h3>{{num}}</h3>
        <button @click="num++">操作数据</button>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      title: "Hello Vue!",
      num:0
    };
  },
  
  methods:{
      show(){
          console.log('我是show方法');
      },
      
  },
  beforeCreate() {
    console.log("-------beforeCreate--------");
    /* 
      beforeCreate钩子函数在组件创建之前被调用，该函数被调用的时候，props,data,mehtods都没有被创建
      该组件的用处不是很大，但地位很高。
    */
    console.log("data", this.msg);
    //console.log('props',this.title);
    //this.show();
  },
  created(){
        console.log("-------created--------");
        /* 
          created钩子函数是在init Injections&Activitys之后被调用，此时已经完成props,data,methods的创建，所以在此处
          调用这些方法或方法
          模板或者DOM还没有被创建
          此钩子函数重要的用途是用来向服务端获取网络请求数据
          在此钩子函数之后的钩子中也能完成网络请求，但是一般都是在这里完成最佳
        */
      
        this.show();
       
  },
  beforeMount(){
    console.log('-------beforeMount--------');
    /* 
      该钩子函数之前的环节主要工作是将数据读取后填充到模板上，之后有读到内存中暂时存储
    */
   console.log('dom',document.querySelector('h2')); 
  },
  mounted(){
     console.log('-------mounted--------');
     console.log('dom',document.querySelector('h2'));
  },
  beforeUpdate(){
    console.log('---------beforeUpdate-----------');
    /* 
      beforeUpdate钩子函数中的特征
      数据已经变了
      但是页面还没来得及渲染
      数据是新的，而页面是旧的
    */
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  updated(){
    console.log('---------updated-----------');
    console.log('data',this.num);
    console.log('dom',document.querySelector('h3').innerHTML);
  },
  beforeDestroy(){
    console.log('-----------beforeDestroy--------------');
    /* 
      此处是准备在销毁之前调用的钩子
      此处特征，数据props，data,methods都可以访问，但是DOM已经被移除了
    */
     console.log('data',this.num);
    // console.log('dom',document.querySelector('h3').innerHTML);
  },
  destroyed(){
     console.log('-----------destroyed--------------');
     console.log('data',this.num);
  }
};
</script>

<style>
</style>

vue3.0生命周期

1.图示

在这里插入图片描述

2.生命周期解释说明

**创建阶段：**从创建Vue实例开始到模版渲染成HTML结束
- setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
- onBeforeMount() : 注册一个钩子，在组件被挂载之前被调用。
  
  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
- onMounted() 注册一个回调函数，在组件挂载完成后执行。通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。
  被视为挂载完成
  1. 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
  2. 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
更新阶段： 当组件依赖的数据发生变化时，需要重新渲染组件，这个过程也涉及到一系列的生命周期函数
- onBeforeUpdate() : 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
  
  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
- onUpdated() : 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
  1. 父组件的更新钩子将在其子组件的更新钩子之后调用。
  2. 钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行 (考虑到性能因素)。
    如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
  3. 注：不要在onUpdated钩子中更改组件的状态，这可能会导致无限的更新循环！
卸载阶段： 当组件不再需要的时候，需要进行卸载操作，也会触发一系列的生命周期函数：
- onBeforeUnmount() : 注册一个钩子，在组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。
- onUnmounted() : 注册一个回调函数，在组件实例被卸载之后调用。
  以下情况被视为已卸载
  1. 其所有子组件都已经被卸载。
  2. 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
    可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
KeepAlives缓存生命周期： 当组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。
- onActivated() : 注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
- onDeactivated() : 注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
注：onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。
onActivated 和 onDeactivated 钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。
捕获组件错误：
- onErrorCaptured()：注册一个钩子，在捕获了后代组件传递的错误时调用。
  捕获错误来源：
  1. 组件渲染
  2. 事件处理器
  3. 生命周期钩子
  4. setup() 函数
  5. 侦听器
  6. 自定义指令钩子
  7. 过渡钩子
    钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
    可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。
    注意不要让错误状态再次渲染导致本次错误的内容，否则组件会陷入无限循环。
    errorCaptured() 钩子可以通过返回 false 来阻止错误继续向上传递。
调试钩子函数：
- onRenderTracked：每次渲染后重新收集响应式依赖
  
  注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
  钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
- onRenderTriggered：每次触发页面重新渲染时自动执行
  
  注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
  钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

onServerPrefetch()： 注册一个异步函数，在组件实例在服务器上被渲染之前调用。

如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。
这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。

<script setup>
import { ref, onServerPrefetch, onMounted } from 'vue'
const data = ref(null)
onServerPrefetch(async () => {
  // 组件作为初始请求的一部分被渲染
  // 在服务器上预抓取数据，因为它比在客户端上更快。
  data.value = await fetchOnServer(/* ... */)
})

onMounted(async () => {
  if (!data.value) {
    // 如果数据在挂载时为空值，这意味着该组件
    // 是在客户端动态渲染的。将转而执行
    // 另一个客户端侧的抓取请求
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>

3.代码示例

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'
 
export default {
  setup () {
    // 其他的生命周期
    onBeforeMount (() => {
    console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted (() => {
        console.log("App ===> 相当于 vue2.x 中 mounted")
    })
    
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {
        console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })
    
    onUpdated (() => {
        console.log("App ===> 相当于 vue2.x 中 updated")
    })
    
    onBeforeUnmount (() => {
    console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })
    
    onUnmounted (() => {
        console.log("App ===> 相当于 vue2.x 中 destroyed")
    })
   
    return {
    }
    
  }
}
</script>

父子组件中生命周期执行顺序

1、只有父组件时，页面组件一旦加载，生命周期及执行顺序
beforeCreate（创建前）
created（创建后）
beforeMount(载入前)
mounted（载入后）
2、存在父子组件时，页面组件一旦加载，生命周期及执行顺序
父组件：beforeCreate、created、beforeMount
子组件：beforeCreate、created、beforeMount、mounted
父组件：mounted

v.3和v2.0生命周期对比

v2.0生命周期	v.3生命周期
beforeCreate （组件创建之前）	setup（组件创建之前）
created（组件创建完成）	setup（组件创建完成）
beforeMount （组件挂载之前）	onBeforeMount（组件挂载之前）
mounted（组件挂载完成）	onMounted（组件挂载完成）
beforeUpdate（数据更新，虚拟dom打补丁之前）	onBeforeUpdate（数据更新，虚拟dom打补丁之前）
updated（数据更新，虚拟dom渲染完成）	onUpdated（数据更新，虚拟dom渲染完成）
beforeDestroy（组件销毁之前）	onBeforeUnmount（组件销毁之前）
destoryed（组件销毁之后）	onUnmount（组件销毁之后）

v2.0 注意

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())
因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。