vue中的生命周期学习记录

2020-12-01  本文已影响0人  派大星星

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:更新数据后立即执行

上一篇下一篇

猜你喜欢

热点阅读