vue生命周期总共有8个阶段:创建前/后 , 载入前/后,更新前/后,销毁前/后.
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象data,都是undefined.
创建后(还未初始化): 在Created阶段,vue实例的数据对象data存在,但是$el并不存在.
载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟dom节点,
data.message还未替.
载入后(mounted): vue实例挂载完成,data.message成功渲染 .一般在这个阶段发ajax请求.
更新前/后: 在data变化时,会触发beforeUpdate和update方法.
销毁前/后: 在执行destroy方法后,对data的改变不在触发发周期函数.说明此时的vue实例已经解除了事件监听
以及和dom的绑定,但是dom结构依然存在.
额外记录:
第一次页面加载会触发那几个钩子函数?
加载时候会触发 beforeCreate,created,beforMount, mounted 这几个钩子函数
每个钩子函数具体适合那些场景?
beforeCreate:可以在这个加loading事件,在加载时候触发
created:初始化完成时的事件写在这里 loading事件,异步请求也适合在这里调用
mounted:挂载元素,获取dom节点
updated:如果对数据统一处理,在这里写上相应的函数
beforeDestroy:可以做一个确认停止事件的确认框,nextTick:更新数据后立即执行
网友评论