Vue生命周期
首先我们需要了解生命周期的概念,生命周期的应用非常广泛,应用到Vue框架上来讲的话,就是vue实例从创建到销毁一系列过程
包括了创建实例、初始化数据、编译模板、挂载dom、渲染页面、更新数据再次渲染页面、页面卸载等一系列的过程
Vue生命周期总共可以分为8个阶段:创建前后、挂载前后、更新前后、销毁前后,以及一些特殊场景的生命周期
beforeCreat 组件实例创建之前
created 组件实例创建之后
beforeMount 组件挂载到实例之前
mounted 组件挂载到实例之后
beforeUpdate 组件数据更新之前
updated 组件数据更新之后
beforeDestroy 组件实例销毁之前
destroyed 组件实例销毁之后
activated keep-alive缓存的组件激活时调用
deactivated keep-alive缓存的组件停用时调用
errorCaptured 捕获到来自子孙组件的错误时调用
具体做了哪些事
beforeCreate -> created 初始化Vue实例 进行数据观测 一般在beforeCreate阶段 常用于插件开发中执行一些初始化任务
created 已完成实例初始化 可以访问实例的data、methods、computed等属性与方法 常用于发请求获取异步数据
created -> beforeMount 判断是否存在el选项,若不存在则停止编译直到调用vm.$mount(el)方法,接着判断是否存在template选项,不存在就将el元素的outerHTML作为template进行模板字符串编译
beforeMount 此时虚拟dom已初始化 但还未挂载到el选项上
beforeMount -> mounted 挂载虚拟dom 转化为真实的dom树
mounted 已完成挂载 以及渲染页面 此时可以访问和操作dom元素 此时可以访问this.$el
beforeUpate 数据更新前调用 可以获取更新前的各种状态 此时view层还未更新 再次更新不会触发更新前后的生命周期
updated 数据已完成更新,再次更新数据会再次触发更新前后的生命周期
beforeDestroy 实例销毁前 此时还可以访问属性和方法
destroyed 实例销毁后 可用于一些定时器或订阅的取消 或者解绑事件监听 清理与其它实例的连接等
Vue生命周期
于 2023-07-19 00:06:17 首次发布