Vue生命周期及各组件间的执行情况

天将降大任于我

已于 2022-08-02 14:55:38 修改

阅读量705

点赞数 4

分类专栏： vue学习文章标签： vue.js javascript 前端

于 2022-08-02 01:44:37 首次发布

本文链接：https://blog.csdn.net/smznbhh/article/details/126102120

版权

vue学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

前言
一、Vue的生命周期是什么？
二、Vue生命周期中具体过程
各组件间的执行情况
总结

前言

Vue的生命周期，各个组件间的执行情况。
注：本文是以Vue2.x版本展开叙述

一、Vue的生命周期是什么？

Vue的组件都是独立存在的，每个组件都要经历他自己的生命周期。Vue的生命周期是指组件：
创建—>数据初始化—>挂载—>更新—>销毁
简单的来说就是组件从创建到销毁之间的过程

二、Vue生命周期中具体过程

1.Vue生命周期中的函数

生命周期钩子也叫生命周期函数也叫生命周期事件，vue中他自己携带了八个生命周期函数，如下：

创建Vue实例期阶段：

beforeCreate：
实例刚在内存中被创建出来，此时，还没有初始化完成data和methods属性。
created：
实例已经在内存中创建完成，此时data和menthods以及创建完成，但没有开始编译模板。
beforeMount：
此时完成了模板的编译，但没有进行挂载。
mounted：
此时已经完成挂载到指定容器中显示了。

运行阶段：

beforeUpdate：
状态更新之前调用此函数，此时data中的状态值是最新的，但在界面上并没有得到更新，还没有开始重新渲染DOM节点。
updated：
实例更新完成后调用此函数，此时以及重新渲染好DOM节点，界面显示数据也是最新的。

销毁阶段：

beforeDestroy：
实例销毁前调用的函数，此时，实力还是完全可用的。
destroyed：
实例销毁后调用，实例锁指示的所有东西都将解绑，所有监听器将移除，所有子实例也将销毁。

生命周期流程图：

代码演示：

 var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        },
        methods: {
            changeMessage() {
                this.message='改变了！'
            }
        },
        beforeCreate() {
            console.log("---------- 初始化前 beforeCreate-----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
            
        },
        created() {
            console.log("---------- 初始化完成 created----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
        },
        beforeMount() {
            console.log("---------- 挂载前 beforeMount----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
        },
        mounted() {
            console.log("---------- 挂载完成 mounted----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
        },
        beforeUpdate() {
            console.log("---------- 更新前 beforeUpdate----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
        },
        updated() {
            console.log("---------- 更新完成 updated----------");
            this.message===undefined?console.log('message没拿到'):console.log(this.message);
            this.$el===undefined?console.log('el没拿到'):console.log(this.$el);
        }
    });

创建阶段运行结果：

可以看到首次加载只会运行前四个周期函数，在挂载前才能拿到el属性，如果要操作DOM节点最早在挂在完成 mounted中操作。

运行阶段运行结果：

在这里插入图片描述

2.加入keep-alive后

1）keep-alive的认识：

是vue自带的内部组件，是用来缓存组件的，达到提升性能的目的。
当使用keep-alive后会增加两个生命周期函数：

activated
在 keep-alive 组件激活时调用，该钩子函数在服务器端渲染期间不被调用。
承担原来created钩子中获取数据的任务
在第一次进入keep-alive包裹的组件时，会调用 beforeCreate、created、beforeMount、mounted、activated；这五个生命周期函数。
当第二次或第n次进入时只会调用activated
deactivated
在 keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用。

2）keep-alive的用法：

Props有三个include、exclude、max。

include
使用字符串或者正则表达式，匹配的组件才会被缓存
exclude
使用字符串或者正则表达式，匹配的组件都不会被缓存
max
以数字的形式记录可以缓存多少个组件实例，到达这个值后再次缓存时将销毁最久未使用的组件实例。

各组件间的执行情况

1.加载渲染过程

过程：
父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件mounted --> 父组件mounted

2.子组件更新过程

过程：
子组件beforeUpdate --> 子组件updated

3.父组件更新过程

父组件beforeUpdate --> 父组件updated

4.组件销毁过程

父组件beforeDestroy --> 子组件beforeDestroy --> 子组件destroyed --> 父组件destroyed

5.过程演示

父组件代码

<template>
  <div style="border: 2px #1E1E1E; height: 500px;width: 500px;background-color: blueviolet; text-align: center">
    <span>{{message}}</span>
    <button @click="changef" >父组件改变</button>
    <Son></Son>
    <button @click="destroy">点击销毁</button>
  </div>
</template>

<script>
import Son from './components/Son.vue'

export default {
  name: 'App',
  components: {
    Son
  },
  data() {
    return {
      message: "父组件"
    }
  },
  methods: {
    changef(){
      this.message='父组件改变了'
    },
    destroy(){
      this.$destroy();
      console.log('销毁完成');
    }
  },
  beforeCreate() {
    console.log("---------- 父组件初始化前 beforeCreate-----------");


  },
  created() {
    console.log("---------- 父组件初始化完成 created----------");

  },
  beforeMount() {
    console.log("---------- 父组件挂载前 beforeMount----------");

  },
  mounted() {
    console.log("---------- 父组件挂载完成 mounted----------");

  },
  beforeUpdate() {
    console.log("---------- 父组件更新前 beforeUpdate----------");
  },
  updated() {
    console.log("---------- 父组件更新完成 updated----------");
  },
  beforeDestroy(){
    console.log('---------- 父组件销毁前 beforeDestroy----------');
  },
  destroyed(){
    console.log('---------- 父组件销毁后 destroyed----------')
  }
}
</script>

子组件代码

<template>
  <div>
    <div style="border: 2px #1E1E1E; height: 200px;width:200px;background-color: aqua;">
      <span>{{message}}</span>
      <button @click="changes">子组件改变</button>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Son',
  props: {

  },
  data() {
    return {
      message: "子组件"
    }
  },
  methods: {
    changes(){
      this.message='子组件改变了'
    }
  },
  beforeCreate() {
    console.log("---------- 子组件初始化前 beforeCreate-----------");


  },
  created() {
    console.log("---------- 子组件初始化完成 created----------");

  },
  beforeMount() {
    console.log("---------- 子组件挂载前 beforeMount----------");

  },
  mounted() {
    console.log("---------- 子组件挂载完成 mounted----------");

  },
  beforeUpdate() {
    console.log("---------- 子组件更新前 beforeUpdate----------");
  },
  updated() {
    console.log("---------- 子组件更新完成 updated----------");
  },
  beforeDestroy(){
    console.log('---------- 子组件销毁前 beforeDestroy----------');
  },
  destroyed(){
    console.log('---------- 子组件销毁后 destroyed----------')
  }
}
</script>