add change event

README.md

@@ -65,6 +65,7 @@
       - [`style` ([Object])](#style-object)
       - [`script` ([Object])](#script-object)
       - [`noscript` ([Object])](#noscript-object)
+      - [`changed` (Function)](#changed-function)
     - [How `metaInfo` is Resolved](#how-metainfo-is-resolved)
 - [Performance](#performance)
     - [How to prevent the update on the initial page render](#how-to-prevent-the-update-on-the-initial-page-render)
@@ -485,6 +486,25 @@ Each item in the array maps to a newly-created `<noscript>` element, where objec
 <noscript>This website requires JavaScript.</noscript>
 ```
 
+#### `changed` (Function)
+
+Will be called when the client `metaInfo` updates/changes. Receives the following parameters:
+- `newInfo` (Object) - The new state of the `metaInfo` object.
+- `addedTags` ([HTMLElement]) - a list of elements that were added.
+- `removedTags` ([HTMLElement]) - a list of elements that were removed.
+
+`this` context is the component instance `changed` is defined on.
+
+```js
+{
+  metaInfo: {
+    changed (newInfo, addedTags, removedTags) {
+      console.log('Meta info was updated!')
+    }
+  }
+}
+```
+
 ### How `metaInfo` is Resolved
 
 You can define a `metaInfo` property on any component in the tree. Child components that have `metaInfo` will recursively merge their `metaInfo` into the parent context, overwriting any duplicate properties. To better illustrate, consider this component heirarchy:

src/client/updateClientMetaInfo.js

@@ -28,6 +28,10 @@ if (typeof window !== 'undefined' && window !== null) {
 export default function updateClientMetaInfo (newInfo, $root) {
   // if this is not a server render, then update
   if (htmlTag.getAttribute(SERVER_RENDERED_ATTRIBUTE) === null) {
+    // initialize tracked changes
+    const addedTags = {}
+    const removedTags = {}
+
     // update the title
     updateTitle(newInfo.title)
 
@@ -40,14 +44,18 @@ export default function updateClientMetaInfo (newInfo, $root) {
     // update tags
     for (let i = 0, len = tags.length; i < len; i++) {
       const tag = tags[i]
-      updateTags(tag, newInfo[tag], headTag)
+      const { oldTags, newTags } = updateTags(tag, newInfo[tag], headTag)
+      if (newTags.length) {
+        addedTags[tag] = newTags
+        removedTags[tag] = oldTags
+      }
+    }
+
+    // emit event
+    if (typeof newInfo.changed === 'function') {
+      newInfo.changed(newInfo, addedTags, removedTags)
     }
   } else {
     htmlTag.removeAttribute(SERVER_RENDERED_ATTRIBUTE)
   }
-
-  // HACK: since we're performing DOM side effects, we can't rely on
-  // Vue.nextTick in our tests. This event helps keep the test suite
-  // free of setTimeout clutter
-  $root.$emit('vue-meta-update')
 }

src/shared/getMetaInfo.js

@@ -15,7 +15,7 @@ export default function getMetaInfo (component) {
   for (let key in info) {
     if (info.hasOwnProperty(key)) {
       const value = info[key]
-      if (typeof value === 'function') {
+      if (typeof value === 'function' && key !== 'changed') {
         info[key] = value()
       }
     }

test/basic.spec.js

@@ -11,8 +11,8 @@ describe('basic', () => {
 
   function setMetaInfo (metaInfo) {
     return new Promise((resolve) => {
+      metaInfo = Vue.util.extend(metaInfo, { changed: resolve })
       vm = new Vue({ el: container, metaInfo })
-      vm.$on('vue-meta-update', resolve)
     })
   }