• vue的生命周期函数


    路由钩子函数/导航守卫

    1.全局--写在路由配置文件index.js中(全部路由变化)

    改变前:拦截操作 router.beforeEach:(ro,from,next)=>{ };

    改变后:获取路由信息 router.afterEach:(ro,from,next)=>{ };

    进入完成、解析:获取路由信息

    2.组件内:写在组件内(当前组件涉及的路有变化)

    进入前:beforeRouteEnter:(to,from,next)=>{ };

    发生改变:beforeRouteUpdate:(to,from,next)=>{ };

    离开前:beforeRouteLeave:(to,from,next)=>{ };

     

    3.独享:写在路由配置文件index.js中{path:---};(当前路由变化)

    {

    path:"",

    compontont:"",

    beforeEnter:(to,from,next)=>{ };

     

    }

     

     

     

    路由元信息 meta

    keep-alive遇到什么问题,造成了什么影响,如何解决,解决后的效果

    (为什么)用keep-alive组件:在数据没有发生改变的情况下可以大大降低网络请求的时间从而提高网站性能

     

    activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的,否则则不存在

    Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。keep-alive用于保存组件的渲染状态。

    包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似,`` 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

    keep-alive的两种:

    activated

    使用`会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated`阶段获取数据,承担原来created钩子中获取数据的任务。

    deactivated

     

     

     

    组建生命周期/钩子函数

    ①beforeCreate

    组件实例将要创建,一般在该时机,开启加载一个动画。

    ②created

    组件实例创建完成,在该时机可以访问实例中的data的属性和methods中的方法,但不能操作dom。因为页面还未加载成功,页面未显示。 注意:调用methods中的方法,完成网络请求,vue推荐的两种数据获取方式 1、beforeRouteEnter 该路由加载之前请求数据,数据请求完成执行next(),显示目标路由(优点:保证页面显示时,一定可以拿到数据) 2、created,在该时机发起请求,获取数据

    ③beforeMount

    组件实例将要挂载到挂载点,页面未显示,开发中很少使用

    ④mounted

    组件模板已经渲染到指定的el,页面显示,可以操作dom。

    ⑤beforeUpdate

    组件将要更新

    ⑥updated

    组件更新完成 注意:关于update的钩子函数,都是页面动态渲染有关,每当数据变化是,变会页面更新,都会触发这些钩子,这些钩子的触发频率很高,我们极少操作,即便操作,也要保证内部方法轻量级。

    ⑦beforeDestroy

    组件将要销毁

    ⑧destroyed

    组件销毁完成。常在该时机移除耗时操作,比如计时器等

     

  • 相关阅读:
    苹果开发者账号多少钱?个人/公司/企业申请费用及怎么选【都有】
    uniapp ios真机调试【亲测有效】
    Uniapp---IOS打包证书私钥密码怎么获取?
    微信小程序地图计算两个点之间的距离
    各大地理坐标系互转
    解决mac下vscode等应用中vim光标无法快速移动
    python 脚本如何在后代运行并记录标准输出
    wkhtmltox 在Linux上安装
    shell中的##*,%%*问题
    matplotlib、seaborn 展示中文字体
  • 原文地址:https://www.cnblogs.com/A-Blingbling/p/14536796.html
Copyright © 2020-2023  润新知