博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue 生命周期的理解
阅读量:4951 次
发布时间:2019-06-11

本文共 1944 字,大约阅读时间需要 6 分钟。

  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 的使用,通常都会使用到元信息,即

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

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

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

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

 

转载于:https://www.cnblogs.com/mufc/p/11287202.html

你可能感兴趣的文章
93. Restore IP Addresses
查看>>
46. Permutations
查看>>
找出点的密集区域,javascript实现,html5 canvas效果图
查看>>
Microsoft project 快捷键
查看>>
hadoop之定制自己的sort过程
查看>>
DataTable和 DataRow的 区别与联系
查看>>
字符串和编码的问题
查看>>
检索COM 类工厂中CLSID 为 {00024500-0000-0000-C000-000000000046}的组件时失败
查看>>
mysql数据库中数据类型
查看>>
python-实现生产者消费者模型
查看>>
APP网络优化篇
查看>>
算法18-----判断是否存在符合条件的元素【list】
查看>>
《刑法》关于拐卖妇女儿童犯罪的规定
查看>>
Windows的本地时间(LocalTime)、系统时间(SystemTime)、格林威治时间(UTC-Time)、文件时间(FileTime)之间的转换...
查看>>
alias重启后失效了
查看>>
RestTemplate的Object与Entity的区别
查看>>
Fireworks基本使用
查看>>
《代码整洁之道》学习记录
查看>>
C++深入理解虚函数
查看>>
c#线程学习笔记一---基本概念
查看>>