Merge pull request #531 from zysndy/component-lifestyle

fix: 组件的生命周期响应问题

Author: anchengjian

src/platforms/mp/join-code-in-build.js

@@ -23,4 +23,8 @@ exports.mpLifecycleHooks = `'onLaunch',
   'onReachBottom',
   'onShareAppMessage',
   'onPageScroll',
-  'onTabItemTap'`
+  'onTabItemTap',
+  'attached',
+  'ready',
+  'moved',
+  'detached'`

src/platforms/mp/runtime/lifecycle.js

@@ -205,7 +205,7 @@ export function initMP (mpType, next) {
       ready () {
         mp.status = 'ready'
 
-        callHook(rootVueVM, 'onReady')
+        callHook(rootVueVM, 'ready')
         next()
 
         // 只有页面需要 setData

test/mp/helpers/index.js

@@ -5,10 +5,11 @@ function strToRegExp (str) {
 
 // runtime
 // fix mp env
-const { App, Page, getApp } = require('./mp.runtime')
+const { App, Page, getApp, Component } = require('./mp.runtime')
 global.App = App
 global.Page = Page
 global.getApp = getApp
+global.Component = Component
 
 const Vue = require('../../../packages/mpvue')
 

test/mp/helpers/mp.runtime.js

@@ -71,6 +71,19 @@ class MPApp extends MPPage {
   }
 }
 
+class MPComponent extends MPPage {
+  // component 与page生命周期不同
+  _initLifecycle () {
+    this._callHook('created')
+    this._callHook('attached')
+    this._callHook('ready')
+  }
+
+  _leaveAndBack () {
+    // 微信原生组件会进入后台，不会触发任何生命周期
+  }
+}
+
 function Page (config) {
   return new MPPage(config)
 }
@@ -84,8 +97,13 @@ function getApp () {
   return appVM
 }
 
+function Component (config) {
+  return new MPComponent(config)
+}
+
 module.exports = {
   Page,
   App,
-  getApp
+  getApp,
+  Component
 }

test/mp/runtime/lifecycle.spec.js

@@ -71,6 +71,19 @@ describe('init mpvue with lifecycle', function () {
       },
       onPageScroll () {
         onLifecycle.push(`pageScroll${key}`)
+      },
+      // custom component lifecycle
+      attached () {
+        onLifecycle.push(`attached${key}`)
+      },
+      ready () {
+        onLifecycle.push(`ready${key}`)
+      },
+      moved () {
+        onLifecycle.push(`moved${key}`)
+      },
+      detached () {
+        onLifecycle.push(`detached${key}`)
       }
     }
   }
@@ -237,4 +250,101 @@ describe('init mpvue with lifecycle', function () {
     expect(app.$mp.status).toEqual('unload')
     expect(onLifecycle).toEqual(['beforeCreate', 'created', 'onLoad', 'onShow', 'onReady', 'beforeMount', 'mounted', 'pullDownRefresh', 'reachBottom', 'shareAppMessage', 'pageScroll', 'unload'])
   })
+
+  it('Component with render', function () {
+    const options = Object.assign(getComponentOptions(), {
+      mpType: 'component',
+      render () {
+        var _vm = this
+        var _h = _vm.$createElement
+        var _c = _vm._self._c || _h
+        return _c('div', {
+          staticClass: 'container'
+        }, [], 1)
+      }
+    })
+
+    const app = createInstance(options)
+    app.$mount()
+    expect(onLifecycle).toEqual(['beforeCreate', 'created', 'attached', 'ready', 'beforeMount', 'mounted'])
+    expect(!!app.$mp.page).toEqual(true)
+    expect(app.$mp.mpType).toEqual('component')
+    expect(app.$mp.status).toEqual('ready')
+  })
+
+  it('Component with component', function () {
+    const warpOptions = Object.assign(getComponentOptions('-warp'), {
+      render () {
+        var _vm = this
+        var _h = _vm.$createElement
+        var _c = _vm._self._c || _h
+        return _c('div', {
+          staticClass: 'container'
+        }, [_vm._v('warp component')], 1)
+      }
+    })
+    const options = Object.assign(getComponentOptions(), {
+      mpType: 'component',
+      components: {
+        warp: warpOptions
+      },
+      render () {
+        var _vm = this
+        var _h = _vm.$createElement
+        var _c = _vm._self._c || _h
+        return _c('div', {
+          staticClass: 'container'
+        }, [_c('warp')], 1)
+      }
+    })
+    const app = createInstance(options)
+    app.$mount()
+
+    expect(onLifecycle).toEqual([
+      'beforeCreate',
+      'created',
+      'attached',
+      'ready',
+      'beforeMount',
+      'beforeCreate-warp',
+      'created-warp',
+      'onLoad-warp',
+      'onReady-warp',
+      'beforeMount-warp',
+      'mounted-warp',
+      'mounted'
+    ])
+    expect(!!app.$mp.page).toEqual(true)
+    expect(app.$mp.mpType).toEqual('component')
+    expect(app.$mp.status).toEqual('ready')
+  })
+
+  it('Component with customEvent', function () {
+    const options = Object.assign(getComponentOptions(), {
+      mpType: 'component',
+      render () {
+        var _vm = this
+        var _h = _vm.$createElement
+        var _c = _vm._self._c || _h
+        return _c('div', {
+          staticClass: 'container'
+        }, [], 1)
+      }
+    })
+    const app = createInstance(options)
+    app.$mount()
+    expect(onLifecycle).toEqual(['beforeCreate', 'created', 'attached', 'ready', 'beforeMount', 'mounted'])
+    expect(!!app.$mp.page).toEqual(true)
+    expect(app.$mp.mpType).toEqual('component')
+    expect(app.$mp.status).toEqual('ready')
+
+    // moved
+    app.$mp.page._callHook('moved')
+    expect(onLifecycle).toEqual(['beforeCreate', 'created', 'attached', 'ready', 'beforeMount', 'mounted', 'moved'])
+
+    // detached
+    app.$mp.page._callHook('detached')
+    expect(app.$mp.status).toEqual('detached')
+    expect(onLifecycle).toEqual(['beforeCreate', 'created', 'attached', 'ready', 'beforeMount', 'mounted', 'moved', 'detached'])
+  })
 })