美文网首页
vue中的生命周期学习记录

vue中的生命周期学习记录

作者: 派大星星 | 来源:发表于2020-12-01 17:43 被阅读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:更新数据后立即执行

    相关文章

      网友评论

          本文标题:vue中的生命周期学习记录

          本文链接:https://www.haomeiwen.com/subject/fviswktx.html