• 生命周期(钩子函数)


    生命周期(钩子函数)
    一、生命周期过程解释

    实例创建之后,初始化事件和生命周期,而后触发beforeCreate。beforeCreate,当前实例创建之前,很少操作,一般用于加载动画,比如创建一个菊花旋转。created表示当前实例创建完成,组件、属性等初始化完成,一般封装一个方法,比如getDataFromNetwork,从网络请求数据。this.getDataFromNetwork()调用,触发回调,关闭beforeCreated中的菊花加载动画。当前实例创建完成,页面还未渲染未显示,拿不到DOM元素。而后,判断实例中是否有el属性(挂载点),如果有,继续往下;如果没有,然后判断是不是有vm.$mount,两者二选其一,接着判断有没有template,如果有,触发渲染函数,进入beforeMount,表示将要挂载,页面仍未显示,接着创建vm.$el,接着触发mounted,此时可以操作dom,beforeUpdate与update保持数据与页面的同步,会频繁触发,一般不要进行操作。接下来,destroyed表示组件销毁,destroy的中一般用于取消计时器,取消观察者等等。

    二、流程图说明

     

    三、具体钩子介绍

    ①beforeCreate
    组件实例将要创建,一般在该时机,开启加载一个动画。
    ②created
    组件实例创建完成,在该时机可以访问实例中的data的属性和methods中的方法,但不能操作dom。因为页面还未加载成功,页面未显示。
    注意:调用methods中的方法,完成网络请求,vue推荐的两种数据获取方式
    1、beforeRouteEnter 该路由加载之前请求数据,数据请求完成执行next(),显示目标路由(优点:保证页面显示时,一定可以拿到数据)
    2、created,在该时机发起请求,获取数据
    ③beforeMount
    组件实例将要挂载到挂载点,页面未显示,开发中很少使用
    ④mounted
    组件模板已经渲染到指定的el,页面显示,可以操作dom。
    ⑤beforeUpdate
    组件将要更新
    ⑥updated
    组件更新完成
    注意:关于update的钩子函数,都是页面动态渲染有关,每当数据变化是,变会页面更新,都会触发这些钩子,这些钩子的触发频率很高,我们极少操作,即便操作,也要保证内部方法轻量级。
    ⑦beforeDestroy
    组件将要销毁
    ⑧destroyed
    组件销毁完成。常在该时机移除耗时操作,比如计时器等

    活到老,学到老。 踏实+激情+坚持
  • 相关阅读:
    结束咯
    在Ubuntu上不能使用PPA下载
    月亮+大环
    piano
    花都论坛,广州花都本地生活
    LLVM的调用协议与内存对齐
    SALVIA 0.5.2优化谈
    LLVM随笔
    OS之争:永不停歇的战争(二,完结)
    OS之争:永不停歇的战争(一)
  • 原文地址:https://www.cnblogs.com/andyZhang0511/p/11187786.html
Copyright © 2020-2023  润新知