Vue方向：Vue生命周期详解

生命周期的定义

生命周期：就是一个组件从实例化创建并添加到DOM开始，一直到组件被销毁的整个过程。

生命周期函数（钩子函数）：就是在Vue生命周期的整个过程的不同阶段被调用的函数。

生命周期图示

首先来看一下官网对于Vue生命周期的图解，官网上目前有8个生命周期函数，还有两个后期再看。

注意事项：

1、Vue的生命周期中的beforeCreate、created、beforeMount、mounted只会执行一次。

2、而Vue中的beforeUpdate、updated的生命周期只要数据发生了改变便会触发。

图1

beforeCreate：创建DOM元素前，此时打印this，data没有数据。（一般这一步不会做任何事情）

beforeCreate() {

      //大部分这一步不会做任何事情

       console.log('初始化数据之前');

       console.log('this',this)

}

created：DOM元素创建渲染完成，包括数据在内的所有vue内部初始化完毕，此时打印this，data中已经有数据了（一般在这个阶段中发送ajax请求）

created() {

           //数据初始化完毕

           //一般用于掉用ajax去请求后台数据接口

          console.log('数据初始化完毕');

          console.log('this',this)

}

图2

会先判断创建的Vue实例对象中是否有el去挂载DOM元素，如果有的话，往下执行，如果没有，那么会执行vm.$mount('#app')的方式去挂载DOM元素，如果vm.$mount都没挂载DOM元素节点，那么数据便不会被渲染到视图中去。

注意点：如果没有template模板的话，那么会将挂载元素的#app作为模板去进行编译。（即

）

图3

beforeMount：页面初次渲染之前执行

mounted：页面初次渲染完毕，我们经常会在这个钩子函数中处理跟页面有关，（ 如获取DOM，或者一些希望在页面渲染完毕后做一些事情 ）

图4

beforeUpdate：当页面在mounted阶段渲染完毕后，如果Vue中发生了数据的变化，那么会进入beforeUpdate阶段，在这个阶段，数据会更新，但是值得注意的是，并不会在页面上展示更新后的内容！

updated：数据更新完毕，并且页面重新渲染完成。（会再一次的触发mouted周期）

图5

beforeDestroy：是指的组件在销毁之前会触发。（一般用于解除绑定，销毁子组件及事件监听器）针对于特定的定时器以及自定义事件，需要手动的去清除，否则会一直占用内存在运行着（如清除方法：clearInterval(timer) ）。

destroyed：指的组件在销毁结束后触发。（没有很大的实际用途）