vue生命周期与生命周期钩子

Vue中的生命周期

通俗地讲，生命周期即Vue实例或组件从创建到被消灭的一系列过程，中间的各个节点被称为钩子。 Vue中created方法是一个生命周期钩子函数，一个vue实例被生成后会调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段嵌入并运行自己的代码。

生命周期与生命周期钩子

要深刻理解生命周期的各个节点，就必须了解浏览器的渲染过程

• 创建app实例，在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

• 构建DOM树

• 构建css规则树，根据执行顺序解析js文件。

• app实例挂载，在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行操作。

• 构建渲染树Render Tree

• 渲染树布局layout

• 渲染树绘制

  生命周期图示