fix(mp-toutiao): 修复反复快速创建销毁页面时组件无法渲染的问题

src/platforms/mp-toutiao/runtime/wrapper/component-parser.js

 import {
   isPage,
   initRelation,
-  handleLink
+  handleLink,
+  components
 } from './util'
 
 import {
@@ -11,17 +12,26 @@ import {
 
 import parseBaseComponent from '../../../mp-weixin/runtime/wrapper/component-base-parser'
 
-const components = []
+function currentComponents (mpInstance, callback) {
+  const webviewId = mpInstance.__webviewId__
+  const currentComponents = components[webviewId]
+  if (currentComponents) {
+    callback(currentComponents)
+  }
+}
 
 export default function parseComponent (vueOptions) {
   const [componentOptions, VueComponent] = parseBaseComponent(vueOptions)
+  const lifetimes = componentOptions.lifetimes
 
   // 基础库 2.0 以上 attached 顺序错乱，按照 created 顺序强制纠正
-  componentOptions.lifetimes.created = function created () {
-    components.push(this)
+  lifetimes.created = function created () {
+    currentComponents(this, components => {
+      components.push(this)
+    })
   }
 
-  componentOptions.lifetimes.attached = function attached () {
+  lifetimes.attached = function attached () {
     this.__lifetimes_attached = function () {
       const properties = this.properties
 
@@ -48,17 +58,28 @@ export default function parseComponent (vueOptions) {
       // 触发首次 setData
       this.$vm.$mount()
     }
-    let component = this
-    while (component && component.__lifetimes_attached && components[0] && component === components[0]) {
-      components.shift()
-      component.__lifetimes_attached()
-      delete component.__lifetimes_attached
-      component = components[0]
-    }
+    currentComponents(this, components => {
+      let component = this
+      while (component && component.__lifetimes_attached && components[0] && component === components[0]) {
+        components.shift()
+        component.__lifetimes_attached()
+        delete component.__lifetimes_attached
+        component = components[0]
+      }
+    })
+  }
+
+  lifetimes.detached = function detached () {
+    currentComponents(this, components => {
+      const index = components.indexOf(this)
+      if (index >= 0) {
+        components.splice(index, 1)
+      }
+    })
   }
 
   // ready 比 handleLink 还早，初始化逻辑放到 handleLink 中
-  delete componentOptions.lifetimes.ready
+  delete lifetimes.ready
 
   componentOptions.methods.__l = handleLink
 

src/platforms/mp-toutiao/runtime/wrapper/page-parser.js

 import {
-  isPage,
+  isPage,
   instances,
+  components,
   initRelation
 } from './util'
 
@@ -11,8 +12,17 @@ export default function parsePage (vuePageOptions) {
     isPage,
     initRelation
   })
+  const lifetimes = pageOptions.lifetimes
+  const oldCreated = lifetimes.created
+  lifetimes.created = function created () {
+    const webviewId = this.__webviewId__
+    components[webviewId] = []
+    if (typeof oldCreated === 'function') {
+      oldCreated.call(this)
+    }
+  }
   // 页面需要在 ready 中触发，其他组件是在 handleLink 中触发
-  pageOptions.lifetimes.ready = function ready () {
+  lifetimes.ready = function ready () {
     if (this.$vm && this.$vm.mpType === 'page') {
       this.$vm.__call_hook('created')
       this.$vm.__call_hook('beforeMount')
@@ -22,18 +32,22 @@ export default function parsePage (vuePageOptions) {
     } else {
       this.is && console.warn(this.is + ' is not ready')
     }
-  }
-
-  pageOptions.lifetimes.detached = function detached () {
-    this.$vm && this.$vm.$destroy()
-    // 清理
-    const webviewId = this.__webviewId__
-    webviewId && Object.keys(instances).forEach(key => {
-      if (key.indexOf(webviewId + '_') === 0) {
-        delete instances[key]
-      }
-    })
+  }
+  const oldDetached = lifetimes.detached
+  lifetimes.detached = function detached () {
+    if (typeof oldDetached === 'function') {
+      oldDetached.call(this)
+    }
+    this.$vm && this.$vm.$destroy()
+    // 清理
+    const webviewId = this.__webviewId__
+    webviewId && Object.keys(instances).forEach(key => {
+      if (key.indexOf(webviewId + '_') === 0) {
+        delete instances[key]
+      }
+    })
+    delete components[webviewId]
   }
 
   return pageOptions
-}
+}

src/platforms/mp-toutiao/runtime/wrapper/util.js

@@ -52,6 +52,7 @@ export function initRefs (vm) {
 }
 
 export const instances = Object.create(null)
+export const components = Object.create(null)
 
 export function initRelation ({
   vuePid,
@@ -101,4 +102,4 @@ export function handleLink ({
   vm._isMounted = true
   vm.__call_hook('mounted')
   vm.__call_hook('onReady')
-}
+}