浅谈Vue生命周期

定义:

从组件诞生到销毁的全过程。

四个过程; 初始化---------->挂载----------------->更新---------------------->销毁

八大周期:beforeCreated---------------------->Created-------------------->beforeMount-------------->

Mount------------------->beforeDestory------------------------->Destory

                                         

初始化

1.beforeCreated

在这个阶段会初始化一些东西，初始化data中的数据，methods中的方法，计算属性computed,以及this的指向等。

2.Created

初始化完毕，可以使用data中的数据，methods中的方法。

挂载

3.beforeMount

在这个阶段里面,会把模板给编译完成,这也是最后一次对data中的数据进行更改的机会，因为马上就要去进行挂载。

4.Mount

找到容器,挂载到页面上，此时可以对DOM进行操作了。

更新

5.beforeUpdated

当数据发生更新的时候,这个周期会进行一些相应的操作,会产生一份新的虚拟节点，和上一份虚拟节点最大化的进行对比，以完成最大程度地渲染。

6.Updated

页面中的data此时是最新的了。

销毁

7.beforeDestory

在这个阶段，为组件的销毁前做准备,组件还没有完全的得到销毁，任然可以使用到DOM。

8.Destory

组件销毁。

过代码来看生命周期

<template>
  <div class="">
    <h1 ref="aa">{{ messasge }}</h1>
    <button @click="fn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messasge: "张三",
    };
  },
  // 初始化之前
  beforeCreate() {
    console.log(this.messasge, "初始化数据阶段");
  },
  // 初始化完毕
  created() {
    console.log(this.messasge, "初始化好了");
  },
  // 挂载前,对数据的最后一次进行更改,编译完毕,马上将要挂载
  beforeMount() {
    console.log(this.messasge, "编译完毕,将要进行挂载");
    console.log(this.$refs.aa.innerHTML, "还没有进行挂载,获取不了");
  },
  // 编译完毕,将要去实现挂载
  mounted() {
    console.log(this.$refs.aa.innerHTML, "能够获取到真实的DOM");
  },
  beforeUpdate() {
    // 当data里面的数据发生更新的时候,产生一份虚拟节点他，通过diff算法完成最大化的渲染，
    console.log(
      this.$refs.aa.innerHTML,
      "通过diff算法比对准备更新,数据还是之前的"
    );
  },
  updated() {
    //data里面的数据和页面中此时是最新的了。
    console.log(this.$refs.aa.innerHTML, "更新完的");
  },
  beforeDestroy() {
    //为组件的销毁前做一些准备
    console.log("销毁前最后的挣扎");
  },
  Destroyed() {
    console.log("组件得到销毁");
    // 组件已经完全销毁
  },
  name: "",
  methods: {
    fn() {
      this.messasge = 22222222;
    },
  },
};
</script>

<style scoped></style>

view图:

   

总结:

在beforeCreated进行初始化一些methods方法，data里面的数据,computed里面的计算属性。

在Created里面能够使用data里面的数据和methods的方法了。

在beforeMount里面进行编译，此时模板已经编译完成，但没有进行挂载。

在Mount里面挂载完成，能够获取到真实的DOM

在beforeUpdated里面，当数据更新的时候新的Vnode和旧的Vnode会进行对比，通过Diff算法完成最优化的处理,渲染出Dom。

在Updated阶段，此时数据已经更新完毕，data里面的数据是最新的了。

在beforeDestory阶段，此时在为销毁前做一些准备，组件还是能够使用的。

在Destory阶段,组件已经完全得到销毁。