生命周期(Life Cycle)

是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。

生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行 。是vue在关键时刻帮我们调用的一些特殊名字的函数。

生命周期函数中的this指向的是vm或组件实例对象

组件创建阶段new Vue( )

beforeCreate --> created --> beforeMount --> mounted

• beforeCreate( ) 此时组件的props/data/methods尚未被创建，都处于不可用状态(无法通过vm访问到data中的数据、methods中的方法)
• create( ) 组件的props/data/methods已创建好，都处于可用的状态。但是组件的模板结构还未生成(不能操作DOM)！！！

create函数非常重要，通常是在create( )里面发Ajax请求（使用methods里 面的方法来请求服务器数据，并且将数据转存到data中，供template模板渲染时使用）

• beforeMount( ) 将要把内存中编译好的HTML结构 (虚拟DOM) 渲染到浏览器中(转换为真实DOM)，此时浏览器中还没有当前组件的DOM结构 (此时页面中的DOM是未经vue编译的DOM)

在这个函数中操作DOM，随后就被 虚拟DOM转化的真实DOM插入页面时所覆盖，所以操作都会失效

• mounted( ) 重要！ 此时已经把内存中编译好的HTML结构渲染到浏览器之中，此时浏览器中包含了当前组件的DOM结构 (最早可以在mounted函数里对当前组件的DOM元素进行操作 )

Vue完成了模板的解析并把初始的真实DOM元素放入页面之后(完成挂载)调用mounted( )

在虚拟DOM转化为真实DOM时，vue将虚拟DOM保存到vm.el中，为后续数据更新时，新的虚拟DOM和旧的虚拟DOM作比较时，若有的元素或者节点可以复用，则vue直接在vm.el中，为后续数据更新时，新的虚拟DOM和旧的虚拟DOM作比较时，若有的元素或者节点可以复用，则vue直接在vm.el中，为后续数据更新时，新的虚拟DOM和旧的虚拟DOM作比较时，若有的元素或者节点可以复用，则vue直接在vm.el中获取到相应节点

至此，初始化过程结束了，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作。即一上来就要做的事情就要写在这个函数里面

组件运行阶段

beforeUpdate --> updated

• beforeUpdate( ) 当data节点里面的数据发生变化的时候才会触发这个函数。此时data数据更新但组件的模板结构还没有重新渲染 (页面尚未和数据保持同步)
• updated( ) 此时data更新完数据，组件的DOM结构也重新渲染完成

当数据发生变化之后，为了能操作最新的DOM结构，必须把DOM操作的代码写到updated( )生命周期函数中

注意：这个阶段的两个函数执行的次数最少为0次(data数据没有变化)，最多为无数次

组件销毁阶段

beforeDestroy --> destroyed

调用vm.$destroy( )完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令以及自定义事件，但原生的DOM事件仍然有效。并且会触发beforeDestroy和destroyed的钩子

• beforeDestroy( )重要！ 此时vm中所有的data、methods、指令等都处于可用状态，马上要执行销毁过程。但是此时所有对数据的修改不会再触发beforeUpdate( )和updated( )了！ 。一般在此函数内 关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

webpack打包编译main.js，整个项目都是从main.js开始的，webpack发现了App.vue，进而发现App.vue里面嵌套的其他组件，整个打包完以后，webpack会生成两个js文件并且放到index.html里面

注意：在写周期函数的时候，要写到与methods节点同等级的位置

生命周期小总结