vue生命周期以及各个生命周期的实例

先上一张生命周期图，该图示来源于关于Vue实例的生命周期

这里主要说明各个生命周期用来做哪些事情而不再赘述vue生命周期的概念和理解

vue生命周期图示

beforeCreate：Vue实例挂载的元素节点el、data都并未初始化

使用：这里可加loading

示例：使用mint-ui组件添加个页面的loading效果

import { Indicator } from 'mint-ui';

beforeCreate: function () {

      Indicator.open('加载中...');

},

效果：

created：el未初始化、data已初始化

使用：这里可以结束刚刚的loading效果，可接收上个页面传递的参数，可做一些初始化

示例：接收上个页面传递的参数

列表页传参数id:

this.$router.push({path:"/ArticleDetail",query:{id:id}})

详情页接收id:

data(){ return{ id:null, }},

created(){

      this.id = this.$route.query.id;

},

mounted：el、data已初始化

使用： 在这发起后端请求，获取数据

============== 未完 ============

其余的等我使用了之后来补充