刷网站排名 优帮云,杭州网站建设方案书,天津公司网站建设费,2016网站谷歌权重一、生命周期是什么
生命周期#xff08;Life Cycle#xff09;的概念应用很广泛#xff0c;特别是在政治、经济、环境、技术、社会等诸多领域经常出现#xff0c;其基本涵义可以通俗地理解为“从摇篮到坟墓”#xff08;Cradle-to-Grave#xff09;的整个过程在Vue中实… 一、生命周期是什么
生命周期Life Cycle的概念应用很广泛特别是在政治、经济、环境、技术、社会等诸多领域经常出现其基本涵义可以通俗地理解为“从摇篮到坟墓”Cradle-to-Grave的整个过程在Vue中实例从创建到销毁的过程就是生命周期即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线每个工人生命周期站在各自的岗位当任务流转到工人身边的时候工人就开始工作PS在Vue生命周期钩子会自动绑定 this 上下文到实例中因此你可以访问数据对 property 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () this.fetchTodos())
二、生命周期有哪些
Vue生命周期总共可以分为8个阶段创建前后, 载入前后,更新前后,销毁前销毁后以及一些特殊场景的生命周期 三、生命周期整体流程
Vue生命周期流程图 具体分析
beforeCreate - created
初始化vue实例进行数据观测
created
完成数据观测属性与方法的运算watch、event事件回调的配置
可调用methods中的方法访问和修改data数据触发响应式渲染dom可通过computed和watch完成数据计算
此时vm.$el 并没有被创建
created - beforeMount
判断是否存在el选项若不存在则停止编译直到调用vm.$mount(el)才会继续编译
优先级render template outerHTML
vm.el获取到的是挂载DOM的
beforeMount
在此阶段可获取到vm.el
此阶段vm.el虽已完成DOM初始化但并未挂载在el选项上
beforeMount - mounted
此阶段vm.el完成挂载vm.$el生成的DOM替换了el选项所对应的DOM
mounted
vm.el已完成DOM的挂载与渲染此刻打印vm.$el发现之前的挂载点及内容已被替换成新的DOM
beforeUpdate
更新的数据必须是被渲染在模板上的el、template、render之一
此时view层还未更新
若在beforeUpdate中再次修改数据不会再次触发更新方法
updated
完成view层的更新
若在updated中再次修改数据会再次触发更新方法beforeUpdate、updated
beforeDestroy
实例被销毁前调用此时实例属性与方法仍可访问
destroyed
完全销毁一个实例。可清理它与其它实例的连接解绑它的全部指令及事件监听器
并不能清除DOM仅仅销毁实例
使用场景分析 四、题外话数据请求在created和mouted的区别
created是在组件实例一旦创建完成的时候立刻调用这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的两者的相同点都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机放在mounted中的请求有可能导致页面闪动因为此时页面dom结构已经生成但如果在页面加载前完成请求则不会出现此情况。建议对页面内容的改动放在created生命周期当中。
