VUE组件的生命周期_vue.js

VUE组件的生命周期

一、什么是生命周期？
Vue中每一个组件都是独立的，且每一个组件都有属于自己的生命周期，从一个组件创建、初始化数据、挂载、更新、销毁即一个组件的生命周期。
二、组件生命周期图示

在这里插入图片描述
三、过程解析
1、首先，创建一个Vue的实例化对象；
2、初始化事件和生命周期；
3、初始化注入；
4、判断是否有el选项，若没有则使用vm.$mount()去挂载模板，有则进行下一步；
5、判断是否含有template模板，没有则编译el外层HTML作为模板，有则进行下一步；
6、进入编译模块，把data对象里的数据和Vue语法声明的模板编译成浏览器可读的HTML；
7、将编译好的HTML替换掉el属性所指向的dom；
8、在挂载钩子函数完成后，拆除数据监听，子组件和事件监听。
9、涉及的8个生命周期钩子函数

函数	操作
beforeCreate	在data初始化，event/watcher事件配置之前被调用。
Created	在data初始化后，计算属性和方法的运算，watch/event事件回调，此时还未挂载
beforeMount	挂载之前。在执行时，模板已经在内存中编译完成，但还没有挂载到页面
Mounted	挂载完成。此时dom已经渲染到页面，可以进行dom操作，组件已经离开创建阶段，进入运行阶段
beforeUpdate	组件更新之前。执行时，页面显示的数据仍然是旧的，但data数据是最新的，页面未同步更新
Updated	组件更新完成。执行后，页面数据与data数据都是最新的
beforeDestroy	组件销毁之前。此时组件已经离开运行阶段，进入销毁阶段。当执行时，所有的data，方法，过滤、指令等都还可用，组件还没有开始实际销毁
Destroyed	组件销毁之后。执行后，所有data、方法、都会解绑，所有的事件监听器都会被移除，子实例也会被销毁。且该钩子在服务器端渲染期间不被渲染。