fix: memory leak, use hook events (thanks #522)

src/shared/mixin.js

@@ -1,7 +1,6 @@
 import { triggerUpdate } from '../client/update'
 import { isUndefined, isFunction } from '../utils/is-type'
 import { find } from '../utils/array'
-import { ensuredPush } from '../utils/ensure'
 import { rootConfigKey } from './constants'
 import { hasMetaInfo } from './meta-helpers'
 import { addNavGuards } from './nav-guards'
@@ -80,7 +79,7 @@ export default function createMixin (Vue, options) {
           // if computed $metaInfo exists, watch it for updates & trigger a refresh
           // when it changes (i.e. automatically handle async actions that affect metaInfo)
           // credit for this suggestion goes to [Sébastien Chopin](https://github.com/Atinux)
-          ensuredPush($options, 'created', function () {
+          this.$on('hook:created', function () {
             this.$watch('$metaInfo', function () {
               triggerUpdate(options, this[rootKey], 'watcher')
             })
@@ -99,7 +98,7 @@ export default function createMixin (Vue, options) {
           if (!$root[rootConfigKey].initializedSsr) {
             $root[rootConfigKey].initializedSsr = true
 
-            ensuredPush($options, 'beforeMount', function () {
+            this.$on('hook:beforeMount', function () {
               const $root = this
               // if this Vue-app was server rendered, set the appId to 'ssr'
               // only one SSR app per page is supported
@@ -110,7 +109,7 @@ export default function createMixin (Vue, options) {
           }
 
           // we use the mounted hook here as on page load
-          ensuredPush($options, 'mounted', function () {
+          this.$on('hook:mounted', function () {
             const $root = this[rootKey]
 
             if (!$root[rootConfigKey].initialized) {
@@ -150,21 +149,7 @@ export default function createMixin (Vue, options) {
         }
       }
 
-      // do not trigger refresh on the server side
+      this.$on('hook:destroyed', function () {
-      if (this.$isServer) {
-        /* istanbul ignore next */
-        return
-      }
-
-      // no need to add this hooks on server side
-      updateOnLifecycleHook.forEach((lifecycleHook) => {
-        ensuredPush($options, lifecycleHook, function () {
-          triggerUpdate(options, this[rootKey], lifecycleHook)
-        })
-      })
-    },
-    // TODO: move back into beforeCreate when Vue issue is resolved
-    destroyed () {
         // do not trigger refresh:
         // - when user configured to not wait for transitions on destroyed
         // - when the component doesnt have a parent
@@ -192,6 +177,20 @@ export default function createMixin (Vue, options) {
             triggerUpdate(options, this.$root, 'destroyed')
           }, 50)
         })
+      })
+
+      // do not trigger refresh on the server side
+      if (this.$isServer) {
+        /* istanbul ignore next */
+        return
+      }
+
+      // no need to add this hooks on server side
+      updateOnLifecycleHook.forEach((lifecycleHook) => {
+        this.$on(`hook:${lifecycleHook}`, function () {
+          triggerUpdate(options, this[rootKey], lifecycleHook)
+        })
+      })
     }
   }
 }

src/utils/ensure.js

@@ -10,9 +10,3 @@ export function ensureIsArray (arg, key) {
   }
   return arg
 }
-
-export function ensuredPush (object, key, el) {
-  ensureIsArray(object, key)
-
-  object[key].push(el)
-}