Vue生命周期

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 实例销毁后 可用于一些定时器或订阅的取消 或者解绑事件监听 清理与其它实例的连接等