简述vue的生命周期

简述vue的生命周期1

本篇主要介绍生命周期中常用的八大钩子函数， 剩余的函数将在之后更新

首先什么是生命周期，从vue实例被创建开始到该实例最终被销毁个过程叫做vue的生命周期。在这个周期内大致发生一下几件事，我们从vue实例被创建开始，首先vue实例被创建，之后开始数据的初始化，编译模板，挂载dom，渲染dom，更新对象属性，渲染dom，解绑销毁。在一个vue的生命周期中大致经历以上这些流程。

其次什么是生命周期钩子，生命周期钩子又被称为生命周期事件、生命周期函数。生命周期钩子就是在vue生命周期中触发的各类事件，这些事件就被称为生命周期钩子。在vue生命周期中，大致分为四大阶段，创建、挂载、更新、销毁。这四个阶段又各自对应两个生命周期钩子。下面分别对这四部分进行介绍。

1. 创建部分(create)，就是vue实例被初始化，简单的说就是我们在代码中进行了这个操作 var app = new Vue() ,之后就进入的vue生命周期的创建阶段。在创建阶段中会有两个提供给我们可编程的接口，分别是beforeCreate 和 created。 这两个接口都是在创建阶段触发，但是两个接口又有所不同，beforeCreate比created要先触发，即vue实例初始化后，没有进行数据读取前就触发，如果在此时进行读取data中的数据就会提示unfined。 created 是在实例创建完成后再被调用，此时data中的数据已经写入完成，但是还没有进行dom的挂载，也就还没有与页面进行关联，下面进入挂载阶段。
2. 挂载阶段(mount)，该阶段就是将页面中dom挂载到实例化后的vue对象上。简单的说就是执行了 el: ‘#dom’。该阶段同样有两个接口供我们进行编程，分别是 beforemount 和 mounted 。这两个接口的主要区别在与以有没有将dom挂载到实例对象上，beforemount 是在挂载之前触发，仅对模板进行解析，如果此时输出需要挂载的dom的innerHTML的话，会将模板原样输出，并没有将数据进行渲染。 mounted 实在dom挂载之后，可以将data中的数据渲染的页面上。该阶段之后就进入更新阶段。
3. 更新阶段(update)，该阶段是在页面上的数据在第一次加载之后再次进行更新的时候。同样对应两个接口 beforeupdate 和 update。这两个接口的差异主要在于有没有对页面dom进行渲染。在我们对data中的数据进行修改，且修改完成后触发 beforeupdate ，此时data中的属性值已经是修改完成的状态，但是没有对页面的dom进行渲染。update 就是将数据渲染到页面上。
4. 至此vue的生命周期已经进行到更新阶段，在正常的使用中我们会多次的经常处于更新阶段，对页面的数据进行各种修改。但是为了满足将不必要的事件关闭，释放内存，就还需要销毁阶段。销毁阶段(destory)，在一个实列被销毁后，该实例所绑定的所有事件都会失效，监听器也会被移出。该阶段对应两个接口 beforeDestroy 和 destroy。deforeDestory是在实例需要被销毁但是还没有先回之前调用，此时该实例的的绑定的各类事件、监听器仍然可用。 destroy是在实例销毁后调用，此时该实例的所有东西都不能使用，但是页面上的数据仍保持页面最后一次渲染的数据。

以上内容为个人理解，如有缺漏欢迎指出