理解Vue的生命周期

一、什么是生命周期？

• 一个Vue实例从创建到销毁的整个过程，Vue组件可以看成一个Vue实例。
• Vue实例做了一件将模版编译成内容，替换掉原有的HTML内容。

一、Vue生命周期有哪些？

• 系统自带8个函数：create \ mount \update\ destory

二、一旦进入页面或组件，会执行哪个生命周期？

• beforeCreate \ Created \ beforeMount \ mounted

三、在哪个阶段有el,哪个阶段有data?

• beforeCreate : data和el都没有
• created : 有data 无el
• beforeMount: 有data 无el
• mounted : data和el都有

四、总结

• 生命周期就是vue从开始创建到销毁的过程，分为四大步(创建，挂载，更新，销毁)，每一步又分为两小步，如beforeCreate，created。beforeCreate前，也就是new Vue的时候会初始化事件和生命周期;beforeCreate和created之间会挂载Data，绑定事件;接下来会根据el挂载页面元素，如果没有设置el则生命周期结束，直到手动挂载;el挂载结束后，根据templete/outerHTML(el)渲染页面;在beforeMount前虚拟DOM已经创建完成;之后在mounted前，将vm.$el替换掉页面元素el;mounted将虚拟dom挂载到真实页面(此时页面已经全部渲染完成);之后发生数据变化时触发beforeUpdate和updated进行一些操作;最后主动调用销毁函数或者组件自动销毁时beforeDestroy，手动撤销监听事件，计时器等;destroyed时仅存在Dom节点，其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期。

五、归纳

• 1、每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，他需要数据观测，模版编译，挂载实例到DOM上，以及数据变化时更新DOM。这个过程中会运行叫做生命周期钩子函数，以便用户在特定阶段有机会添加他们自己的代码。
• 2、Vue生命周期总共可以分为8个阶段：创建前后、载入前后、更新前后、销毁前后，以及一些特殊场景的生命周期。Vue3中新增了三个用于调试和服务端渲染场景。

六、结合实践

• beforeCreate: 通常用于插件开发中执行一些初始化任务。
• created: 组件初始化完毕，可以访问各种数据，获取接口数据等。
• mounted: DOM已经创建。可用于获取访问数据和DOM元素;访问子组件等。
• beforeUpdate:此时view层还未更新，可用于获取更新前各种状态。
• updated: 完成view层的更新，更新后，所有状态已是最新。
• beforemounted:实例被销毁前调用,可用于一些定时器或订阅的取消。
• unmounted:销毁一个实例，可清理它与其它实例的连接，解绑它的全部指令及事件监听器。