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

admin2024-05-15  1

文章目录

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

生命周期

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

vue2.0生命周期

1.图示

vue(九) 生命周期 v3.0和v2.0对比,父子组件生命周期的执行顺序,请添加图片描述,第1张

2.生命周期解释说明

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

  1. **创建阶段:从创建Vue实例开始到模版渲染成HTML结束
    • beforeCreate:在实例被创建之初,完成数据观测和event/eventBus事件配置等初始化任务之前调用。
    • created:实例已经完成了数据观测等初始化任务,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,DOM元素并没有生成,且 $el property 目前尚不可用,无法访问。
    • beforeMount:在DOM挂载之前调用,在此期间可以对DOM进行处理,但还未能访问到DOM元素,相关的 render 函数首次被调用,此时是虚拟DOM。该钩子在服务器端渲染期间不被调用。
    • mounted:DOM挂载完成后调用,可以访问到DOM元素、实例属性和方法,并可以与后端请求数据和操作DOM。注意:mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick
  2. 更新阶段: 当组件依赖的数据发生变化时,需要重新渲染组件,这个过程也涉及到一系列的生命周期函数
    • beforeUpdate:在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。 注:该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务器端进行。
    • updated:在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  3. 卸载阶段: 当组件不再需要的时候,需要进行卸载操作,也会触发一系列的生命周期函数:
    • beforeDestroy:在实例销毁之前调用。这个阶段可以进行一些清除工作,比如清除事件监听器或取消定时器。
    • destroyed:实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
  4. **KeepAlives缓存生命周期:**当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
    • deactivated 被 keep-alive 缓存的组件失活时调用。
    • activated 被 keep-alive 缓存的组件激活时调用。
  5. 组件中捕获错误周期: 当捕获一个来自子孙组件的异常时激活钩子函数。
    • 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.图示

vue(九) 生命周期 v3.0和v2.0对比,父子组件生命周期的执行顺序,在这里插入图片描述,第2张

2.生命周期解释说明

  1. **创建阶段:**从创建Vue实例开始到模版渲染成HTML结束
    • setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
    • onBeforeMount() : 注册一个钩子,在组件被挂载之前被调用。
    • onMounted() 注册一个回调函数,在组件挂载完成后执行。通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。
  2. 更新阶段: 当组件依赖的数据发生变化时,需要重新渲染组件,这个过程也涉及到一系列的生命周期函数
    • onBeforeUpdate() : 注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
    • onUpdated() : 注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
  3. 卸载阶段: 当组件不再需要的时候,需要进行卸载操作,也会触发一系列的生命周期函数:
    • onBeforeUnmount() : 注册一个钩子,在组件实例被卸载之前调用。当这个钩子被调用时,组件实例依然还保有全部的功能。
    • onUnmounted() : 注册一个回调函数,在组件实例被卸载之后调用。
  4. KeepAlives缓存生命周期: 当组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时,它将变为不活跃状态而不是被卸载。当组件实例作为缓存树的一部分插入到 DOM 中时,它将重新被激活。
    • onActivated() : 注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。
    • onDeactivated() : 注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。
  5. 捕获组件错误:
    • onErrorCaptured(): 注册一个钩子,在捕获了后代组件传递的错误时调用。
  6. 调试钩子函数:
    • onRenderTracked:每次渲染后重新收集响应式依赖
    • onRenderTriggered:每次触发页面重新渲染时自动执行
  7. onServerPrefetch(): 注册一个异步函数,在组件实例在服务器上被渲染之前调用。
    <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(组件销毁之后)
  1. v2.0 注意

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!