• Vue的生命周期


    先放上一张经典大图

    img

    生命周期函数就是Vue实例在某一个时间点会自动执行的函数

    beforeCreate

    在实例初始化之后,数据和事件配置之前被调用。el和data都还没初始化,所以data、methods和computed等都用不了。一般用来在组件挂在之前渲染一些东西。

    created

    这时候上面的data、methods、computed都已经创建完成了,数据观测,属性和方法的运算,watch/event事件回调都完成了,但这时候挂载阶段mount还没开始,是el并没有完成。这是最常用的生命周期钩子,可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也在这里发ajax请求,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter(路由守卫)中完成。

    beforeMoun

    挂载之前被调用,render(渲染)函数首次被调用(虚拟DOM),这里已经完成了模板编译,data里面的数据和模板会生产HTML,这里el也完成了,但并没有挂载到html页面上。

    mounted

    el被新创建的vm.$el替换,并挂载到实例上之后调用。数据已经真实渲染到了页面上,在这个钩子函数里面我们可以使用一些第三方插件,还可以做一些ajax操作。但mounted只能执行一次。

    首次加载页面时,不会走这两个钩子,只有当数据发生改变的时候才会执行。

    beforeUpdate

    更新指数据更新,发生在虚拟DOM重新渲染和补丁之前,在这个钩子中可以更改状态而不发生重绘。

    updated

    在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用。

    执行销毁需要调用vm.$destroy()

    beforeDestroy

    在实例销毁前调用,但实例还可以用。

    这里还可以使用this,一般用来做重置操作,比如清除定时器和DOM监听事件。

    destroyed

    在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用。

    每个周期具体适合哪些场景?
    • beforecreate : 譬如常见的加loading事件。

    • created :在这结束loading,还做一些初始化,实现函数自执行。

    • mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情。

    • beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容。

    vue获取数据在哪个周期函数?

    一般created/beforeMount/mounted 皆可 正常获取在 created 里面即可,如果涉及到需要页面加载完成之后(DOM操作)的就用 mounted。

     

  • 相关阅读:
    如何将latex格式转换成word? Lei
    SEWM2012会议报告总结 Lei
    matlab图片到word的过程 Lei
    日记——有点郁闷的一天
    牛博国际开放了,等了一个月才能看牛博。
    做什么事都没有兴趣呢,怎么这么低调呢?
    读UML书
    firefox弹出窗口关闭时执行代码刷新父窗口
    终于关注了一下传说中的小强,firebug
    MOSS Export Site Column/Site Content Type
  • 原文地址:https://www.cnblogs.com/manhuai/p/14534472.html
Copyright © 2020-2023  润新知