zoukankan      html  css  js  c++  java
  • vue 生命周期的理解

      vue的生命周期钩子: beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed、activated、deactivated、errorCaptured;在 vue-v2.6 的版本中,又新增了 serverPrefetch 钩子;

      

      beforeCreate

        在这个钩子函数内,初始化了 inject、props、methods、data、computed、wacth、provied;所以在这个钩子里还不可以使用 this;

      created

        在这个钩子函数内,将会挂在实例执行 vm.$mount(vm.$options.el)

        因为在 beforeCreate 钩子内已经将数据进行了初始化,所以我们可以在这个钩子内进行一些 data 实例数据的操作;对于 ajax 请求,通常由于有时候会在这个钩子内对一些 data 数据进行操作,所以个人用的比较多一点,一般就将 ajax 请求放在了这个里边,其实对于 ajax 放在 created 还是 mounted 区别不是很大,因为 created 和 mounted 之间的时间差其实是可以忽略的,队友有时候考虑的会引起二次渲染的问题,其实是没必要去考虑的,因为 ajax 本身就是异步的请求,一般就根据具体的需要去考虑将 ajax 放在哪里,和 react 一样的,mounted 和 componentDidMount 这里边 dom 实例已经挂在,我们就可以对一些 dom 进行处理了

       

      beforeDestory

        在这个钩子内还可以使用 this;

      destoryed

        在这个钩子内是不可以使用 this 的,实例已经在 beforeDestory 被销毁;

      activated

        activated 这个钩子一般会配合着 keep-alive 来使用,用 keep-alive 进行组件的缓存,再次进入组件的时候,就直接跳过前边的钩子函数不再重新执行,而直接执行 activated 钩子;

        这个钩子在组件第一次渲染的时候会被调用,之后每次缓存组件被激活的时候调用;其调用机制就是,第一次调用的时候,是在 mounted 之后,beforeRouterEnter 守卫传给 next 的回调之前调用; 第二次调用的时候,因为组件被缓存了,mounted 以及之前的都不再调用了,就直接从 activated 钩子开始了;

      deactivated

         该钩子函数在 keep-alive 组件停用的时候调用,在服务器渲染期间不被调用;

         使用了 keep-alive 就不会调用 beforeDestory 和 destoryed 钩子了,因为组件没有被销毁,而是缓存起来了,所以这个钩子可以看做是 beforeDestory 和 destoryed 的替代;

      errorCaptured

        这个钩子好像是 v2.5 的版本新加的,主要用来处理一些异常错误,基本不怎么去使用

      serverPrefetch

        serverPrefetch 的前身是 ssrPrefresh;这个钩子是用来处理 ssr 的;允许我们在渲染的过程中 “等待” 异步数据,可以在任何组件中使用,而不仅仅是路由组件;

      keep-alive 是 vue 源码中实现的一个全局抽象组件,即 vue 内置的一个组件;通过自定义的 render 函数并且利用了插槽来实现数据缓存和更新;所有的抽象组件是通过定义 abstract 选项来生命的;抽奖组件不渲染真实的 dom,而且不会出现在父子关系的路径上(initLifecycle 会忽略抽象组件)

      我们在使用 keep-alive 的使用,通常都会使用到元信息,即

    <keep v-if='$route.meta.keepAlive'>
        <router-view></router-view>
    </keep>
    <router-view v-else></router-view>
    

      这样的话,我们难免的就是会多写了几串代码,在vue2.1.0 之后,新增了两个属性: include、exclude 来有条件的缓存路由和组件;

      include:匹配的路由和组件会被缓存;

      ecclude: 匹配的路由和组件不会被缓存;

      如果有多个的话,可以用逗号进行分割开,也可以使用正则进行匹配,但是需要注意的是,使用正则的话,需要用到 v-bind 进行绑定;也可以使用数组,使用数组的时候也是要用 v-bind 进行绑定;

  • 相关阅读:
    Network (poj1144)
    C. Hongcow Builds A Nation
    ZYB loves Xor I(hud5269)
    D. Chloe and pleasant prizes
    Game(hdu5218)
    约瑟夫环的递推方法
    Misaki's Kiss again(hdu5175)
    Exploration(hdu5222)
    B. Arpa's weak amphitheater and Mehrdad's valuable Hoses
    C. Arpa's loud Owf and Mehrdad's evil plan
  • 原文地址:https://www.cnblogs.com/mufc/p/11287202.html
Copyright © 2011-2022 走看看