vue 生命周期详解

组件从创建到销毁的一系列过程就叫做组件的生命周期
vue在整个生命周期中为我们提供了一些钩子函数
钩子函数的特点就是会在生命周期的某一时刻去进行触发

组件的生命周期可以分为三个过程： 初始化、运行中、销毁
初始化阶段钩子函数：beforeCreate created  beforeMounte mounted
运行中阶段钩子函数：beforeUpdate updated
销毁中阶段钩子函数：beforeDestory destroyed

 

初始化阶段：

一个组件的生命周期是从new开始的，实例化之后，会初始化一些事件与生命周期相关的配置

1、beforeCreate()在这里，数据还没有进行挂载，dom也没有进行渲染,此钩子函数一般不用他做任何事情，可以执行以下代码试一下

beforeCreate(){
      console.log("beforeCreate");
      console.log(this.message,document.getElementById("title"));
}

2、created()在这里，数据已经挂载完毕，但是dom节点还是没有进行渲染。
在这个钩子函数里面，如果同步更改数据的话，它不会影响运行中钩子函数的执行。
一般在这个钩子函数里面进行ajax请求！！！  

created(){
       console.log("created");
        console.log(this.message,document.getElementById("title"));
        this.message = this.message.toUpperCase();

},

3、接下来的过程就是组件或者实例去查找对应的模板，然后将其编译成虚拟dom，然后放入到render函数中。

4、beforeMount()钩子函数，代码dom马上将要被渲染了，但是还没有真正的渲染出来！
 此钩子函数跟created钩子函数一样，做一些初始化数据的配置。
 

beforeMount(){
      console.log("beforeMount");
      console.log(this.message,document.getElementById("title"));
},

5、在这中间有一个render的方法把真实DOM渲染到页面上 

render(){
      console.log("render")
 },

6、mounted()钩子函数是生命周期初始化阶段的最后一个钩子函数
在此钩子函数里面可以获取到页面渲染出来的真实dom
 

mounted(){
      console.log("mounted");
      console.log(this.message,document.getElementById("title"));
},

以上初始化阶段就结束了！

下面是运行中阶段：

1、数据要应用在dom中，当数据改变的时候，beforUpdate()钩子函数才会执行  
钩子函数获取到的还是数据更新之前的内容,
在这个钩子函数里面，不能有任何相关的操作，因为修改后又会调用这个函数，这样会进入死循环
 

beforeUpdate(){
      //this.message++; //不能有任何相关的操作  因为修改后会又调这个函数，这样会进入死循环
      console.log("beforeUpdate");
      console.log(document.getElementById("title").innerHTML);
 },

2、beforeUpdate()获取不到最新的数据，生成新的虚拟dom,然后与上一次的虚拟dom做比对，出来差异之后才会进行真实dom的渲染。

updated(){
        console.log("update");
        console.log(document.getElementById("title").innerHTML);
}

以上运行阶段结束！

下面是销毁阶段：

1、组件销毁之前会执行的beforeDestroy()钩子函数,但是还没有被销毁，
这个钩子函数，我们可以做一些善后的操作，清空setter watchter，例如可以清空一些定时器、清空一些绑定的事件，其他的点击事件还是会存在的

beforeDestroy(){
       console.log("beforeDestroy");
       clearInterval( this.timer);
       window.onscroll = null;
 }

2、组件销毁了之后就会执行，组件把数据绑定、事件监听都给移除掉了

destroyed(){
       console.log("destroyed");
}

以上就是VUE生命周期，希望能帮到大家！

官网图示：