vue的生命周期钩子函数

vue的生命周期钩子函数

一，什么是生命周期

    生命周期：vue是一个构造函数，当执行这个函数时，相当于开始创建，初始化数据，编译模板，挂载DOM，渲染—>更新—>渲染，卸载等一些列过程；
    简单来说就是vue从创建到销毁的过程就是vue的生命周期。

二，什么生命周期钩子函数

    1，组件通过new vue()创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真是的dom，一般不会操作
    2，挂载数据，绑定事件等，然后执行create函数，这个时候已经可以使用到数据，也可以更改数据，在这里更改数据不会触发updated函数，
       这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做出事数据的获取
    3，开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，
       这个函数中虚拟dom已经创建完成，马上就要渲染，这里也可以更改数据，不会触发updated，
       这里可以在渲染前作后一次更改数据的机会，不会触发其他的钩子函数，
       此时组件已经出现在页面中，数据，真是的dom都已经处理好了，事件都已经挂载好，可以在这里操作真实的dom等事件
    4，当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不会做什么事
    5，当更新完成后，执行updated（根据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
    6，经过某种途径调用￥destroy方法后，立即执行beforeDestroy,一般在这里做一些善后工作。

三，钩子函数都有什么？

生命周期钩子函数一共有8种；（括号里都是函数在此阶段可以做的事情）

1. beforeCreadted：vue实例的挂载元素$sel和数据对象data都为undefined，还没初始化。（加loading事件）
2. create：vue实例的数据对象data有了，但是$sel还没有。（结束loading事件，请求数据为mounted渲染做准备）
3. beforeMount：vue实例的$sel和data都初始化了，但还是虚拟dom节点，具体的data.filter还没替换。
4. mounted：vue实例挂载成功，data.filter成功渲染。（配合路由钩子函数）
5. beforeUpdate：data更新时触发。
6. updated：data更新时触发。 （数据更新时，做一些处理（此处可以yongwatch进行监听））
7. ，beforeDestroy：组件销户时触发。
8. destroyed：组件销毁时触发，vue实例解除了事件监听以及dom的绑定（无响应），但是dom节点依旧存在。（组件销户时进行提示）