Vue组件的生命周期

Vue的生命周期

(1)     beforeCreate（创建前） 在数据观测和初始化事件还未开始前被调用

(2)     created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el 属性还没有显示出来

(3)     beforeMount（载入前） 在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完 成以下的配置：编译模板，把 data 里面的数据和模板生成 html。注意此时还没有挂载 html 到 页面上。

(4)     mounted（载入后） 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完 成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。

(5)     beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。

(6)     updated（更新后） 在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。

(7)     beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

(8)     destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子 实例也会被销毁。该钩子在服务器端渲染期间不被调用。

每个生命周期内部可以做什么事

(1) created实例创建完成，可以进行一些数据，资源的请求

(2) Mounted 实例载入完成，可以进行一些DOM操作

(3) beforeUpdate 中可以进一步的更新状态，不会触发附加的重渲染过程

(4) Updated 可以执行依赖于Dom的操作，但在大多数情况下应该避免在此期间更改状态，因为这可能导致更新无限循环，在服务器渲染器件不被调用。

(5) Destroyed 可以执行优化操作，清空定时器，解除绑定事件

作者：亐㔓圥忈
链接：https://juejin.cn/post/7143405907009863694
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。