Vue.js 生命周期详解以及使用技巧

Posted 2021-05-01 拂晓的星

PS：标 * 处表示可以手动介入

* beforeCreate

在绑定监听数据方法以及初始化各个事件之前(仅一次)

组件刚被创建，组件属性计算之前，如data属性等

Observer Data 

绑定监听数据方法 => 双向数据绑定（Object.defineProperty）：视图到数据（e.target.value），数据到视图（setter、getter）

InitEvents ：初始化各个事件：watch methods等

* created

组件实例创建完成，属性已绑定，如data、methods等，dom还未生成，$el属性还不存在的时候，在绑定监听数据方法以及初始化各个事件完成之后(仅执行一次，但倘若混合文件里也有created，也会执行)

has 'el' option 

判断对象中有没有el属性，例 new Vue({ el: '#app'})，如果有则继续编译，若没有，暂停编译(停止生命周期)，直到vm.$mount(el)被调用再继续编译

has 'template' option

判断对象中有没有template属性，例new Vue({ template: '<div></div>'})，

如果有，则将其作为模板编译成render函数，如果没有，则把外部html作为模板编译，

例：<div id="app"><p>外部模板</p></div>, ps: template参数选项的优先级要    比外部的HTML高

再如果，二者都不存在，则报错

* beforeMount

加载挂载dom节点、模板编译完成之前 (仅一次)

技巧：如果created里有很多方法，但是他们有先后顺序，如果你在created里面用了setTimeout，其实你可以把setTimeout里要执行的方法放在beforMount里，因为它的执行肯定是在created之后的

create vm.$el and replace "el" with it 

加载dom节点,创建vm.$el来代替"el"

* mounted

加载挂载dom节点、模板编译完毕 (仅一次)

注意：在这个环节之前，都不能操作DOM节点，例如你用了$refs，你应该在这里用

* beforeUpdate

监听的data对象上的属性发生变化时，在重渲染虚拟dom以及补丁虚拟dom之前(每一次)

Virtual DOM re-render and patch

重渲染 虚拟dom 以及补丁虚拟dom

* updated

监听的data对象上的属性发生变化时，在重渲染虚拟dom以及补丁虚拟dom之后(每一次)

* activated

设置了keep-alive（路由中），那么组件被激活时调用

* deactivated

设置了keep-alive（路由中），那么组件被移除时调用

* beforeDestroy

当vm.$destroy被调用时，即 摧毁 当前组件中的watchers、child components 和各个事件监听之前

注意：如果你页面使用了全局广播，请在组件摧毁之前用$off关闭广播，此种情况还有计时器等，都应销毁

teardown watcher，child components and event listeners

摧毁当前组件中的watchers、child components 和各个事件监听

destroyed

摧毁当前组件中的watchers、child components 和各个事件监听之后，什么也干不了了

教你一个前端开发工程师如何完整开发一个具有后台服务和数据库的小程序，教程已在github上，属于个人开发项目。