mpvue继承自Vue.js,其技术规范和语法特点与 Vue.js保持一致，所以具备vue知识储备的同学用mpvue开发小程序很快就能上手。我觉得mpvue比较容易混淆的就是生命周期，mpvue除了Vue 本身的生命周期外,还兼容了小程序的生命周期,接下来就通过实例讲解一下生命周期的执行顺序。
一、生命周期分三个部分
app生命周期+vue生命周期+小程序自有生命周期，所以我会把这三个类型的生命周期通过console打印出来，通过page-app、page-index（首页）、page-user（个人中心）和page-detail（详情页）区分不同页面,其中index和user是tabBar标签,detail是index的详情页。
①在app.vue页面，打印app级别生命周期
②在首页打印vue生命周期和小程序自有生命周期
③个人中心页和detail页也是一样打印
二、通过打印信息，看执行顺序
①初次加载页面进入首页时的生命周期显示，刚好看到可以分为三部分，具体看下面的图
1、首先是app级别的生命周期 onLanunch和onShow(无论后面页面如何跳转，只在app进来只执行一次)，此生命周期可以用来获取微信场景值，https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
2、在app.json->pages中定义的页面,beforeCreatre、created生命周期都会按照pages中的顺序依次先执行，而且也是在app初始化后只执行一次，所以原来我们在vue 发起ajax请求的操作不宜放在created中，可以放在页面级别的onShow生命周期比较合适。
3、小程序生命周期onLoad onShow onReady --->vue生命周期 beforeMount、mount
②那从 首页 跳转到 个人中心页的生命周期怎么走？（此次操作是通过tabBar跳转）,这里可以了解一下 小程序路由跳转的几种区别。可参考官网：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
也是分为了三部分，具体看图，需要注意的是 从首页到个人中心页面，首页的vue destroyed销毁生命周期并没有走，所以需要销毁定时器等耗时任务的放在这个生命周期没有用，可以理解为页面只是隐藏了，并没有销毁。
③从首页跳转到详情页，通过wx.navigateTo的形式跳转，发现比通过tabBar跳转形式少了一个触发onTabItemTap的周期。
④从详情页点击左上角的返回按钮生命周期怎么走？可以发现只有两个生命周期触发了，detail的onUnload和首页的onShow。onUnload走了，相当于原来vue 的destory，可以做一些销毁操作，比较重要的是onShow生命周期，发现无论是从首页到详情页还是通过tabBar跳转或者是返回或者是按home键后再次返回，都会触发，所以在页面级别的onShow做数据初始化ajax请求比较合适。
⑤点击home键，退出页面后，再次回来，生命周期怎么走？
以上是一些用的比较多的场景，还有一些没考虑到的可以自己去打印一下，大家可以试一下。
发现可以得出一个初步结论，用mpvue开发可以使用vue的开发方式（比如vuex,双向数据绑定等），但生命周期适合用微信小程序的生命周期。
我把生命周期打印的格式贴出来
// vue 生命周期
beforeCreate () {
console.log('vue [page-index] beforeCreate')
},
created () {
console.log('vue [page-index] created')
},
beforeMount () {
console.log('vue [page-index] beforeMount')
},
mounted () {
console.log('vue [page-index] mounted')
},
beforeUpdate () {
console.log('vue [page-index] beforeUpdate')
},
updated () {
console.log('vue [page-index] updated')
},
activated () {
console.log('vue [page-index] activated, mpvue 实际运行并没有回调, 原因不支持 keep-alive')
},
deactivated () {
console.log('vue [page-index] deactivated, mpvue 实际运行并没有回调, 原因不支持 keep-alive')
},
beforeDestroy () {
console.log('vue [page-index] beforeDestroy, mpvue 实际运行并没有回调, bug')
},
destroyed () {
console.log('vue [page-index] destroyed, mpvue 实际运行并没有回调, bug')
},
//app 部分：
onLaunch () {
console.log('小程序 [page-index] 生命周期: onLaunch: 初始化')
},
onShow () {
console.log('小程序 [page-index] 生命周期: onShow: 当小程序启动，或从后台进入前台显示')
},
onHide () {
console.log('小程序 [page-index] 生命周期: onHide: 当小程序从前台进入后台')
},
// 小程序页面自有生命周期
onLoad () {
console.log('小程序 [page-index] 生命周期: onLoad: 监听页面加载')
},
onShow () {
console.log('小程序 [page-index] 生命周期: onShow: 监听页面显示')
},
onReady () {
console.log('小程序 [page-index] 生命周期: onReady: 监听页面初次渲染完成') },
onHide () {
console.log('小程序 [page-index] 生命周期: onHide: 监听页面隐藏')
},
onUnload () {
console.log('小程序 [page-index] 生命周期: onUnload: 监听页面卸载')
},
onPullDownRefresh () {
console.log('小程序 [page-index] 生命周期: onPullDownRefresh: 监听用户下拉动作')
},
onReachBottom () {
console.log('小程序 [page-index] 生命周期: onReachBottom: 页面上拉触底事件的处理函数')
},
onShareAppMessage () {
console.log('小程序 [page-index] 生命周期: onShareAppMessage: 用户点击右上角分享')
},
onPageScroll () {
console.log('小程序 [page-index] 生命周期: onPageScroll: 页面滚动')
},
onResize () {
console.log('小程序 [page-index] 生命周期: onResize: 宽高改变')
},
onTabItemTap (item) {
console.log('小程序 [page-index] 生命周期: onTabItemTap: 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）')
}