📈 performance: fix blocking at beforeDestroy

close #187
kazupon · Jul 1, 2017 · 570b215 · 570b215
1 parent a018516
commit 570b215
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ import {
   isPlainObject,
   isObject,
   looseClone,
+  remove,
   canUseDateTimeFormat,
   canUseNumberFormat
 } from './util'
@@ -35,6 +36,7 @@ export default class VueI18n {
   _dateTimeFormatters: Object
   _numberFormatters: Object
   _path: I18nPath
+  _dataListeners: Array<any>
 
   constructor (options: I18nOptions = {}) {
     const locale: Locale = options.locale || 'en-US'
@@ -57,6 +59,7 @@ export default class VueI18n {
     this._dateTimeFormatters = {}
     this._numberFormatters = {}
     this._path = new I18nPath()
+    this._dataListeners = []
 
     this._exist = (message: Object, key: Path): boolean => {
       if (!message || !key) { return false }
@@ -85,19 +88,33 @@ export default class VueI18n {
     Vue.config.silent = silent
   }
 
-  watchI18nData (fn: Function): Function {
+  subscribeDataChanging (vm: any): void {
+    this._dataListeners.push(vm)
+  }
+
+  unsubscribeDataChanging (vm: any): void {
+    remove(this._dataListeners, vm)
+  }
+
+  watchI18nData (): Function {
+    const self = this
     return this._vm.$watch('$data', () => {
-      fn && fn()
+      let i = self._dataListeners.length
+      while (i--) {
+        Vue.nextTick(() => {
+          self._dataListeners[i] && self._dataListeners[i].$forceUpdate()
+        })
+      }
     }, { deep: true })
   }
 
-  watchLocale (fn: Function): ?Function {
+  watchLocale (): ?Function {
     /* istanbul ignore if */
     if (!this._sync || !this._root) { return null }
     const target: any = this._vm
     return this._root.vm.$watch('locale', (val) => {
       target.$set(target, 'locale', val)
-      fn && fn()
+      target.$forceUpdate()
     }, { immediate: true })
   }
 

diff --git a/src/mixin.js b/src/mixin.js
@@ -24,7 +24,9 @@ export default {
           }
         }
         this._i18n = options.i18n
-        this._i18nWatcher = this._i18n.watchI18nData(() => this.$forceUpdate())
+        this._i18nWatcher = this._i18n.watchI18nData()
+        this._i18n.subscribeDataChanging(this)
+        this._subscribing = true
       } else if (isPlainObject(options.i18n)) {
         // component local i18n
         if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
@@ -45,10 +47,12 @@ export default {
         }
 
         this._i18n = new VueI18n(options.i18n)
-        this._i18nWatcher = this._i18n.watchI18nData(() => this.$forceUpdate())
+        this._i18nWatcher = this._i18n.watchI18nData()
+        this._i18n.subscribeDataChanging(this)
+        this._subscribing = true
 
         if (options.i18n.sync === undefined || !!options.i18n.sync) {
-          this._localeWatcher = this.$i18n.watchLocale(() => this.$forceUpdate())
+          this._localeWatcher = this.$i18n.watchLocale()
         }
       } else {
         if (process.env.NODE_ENV !== 'production') {
@@ -58,13 +62,19 @@ export default {
     } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {
       // root i18n
       this._i18n = this.$root.$i18n
-      this._i18nWatcher = this._i18n.watchI18nData(() => this.$forceUpdate())
+      this._i18n.subscribeDataChanging(this)
+      this._subscribing = true
     }
   },
 
   beforeDestroy (): void {
     if (!this._i18n) { return }
 
+    if (this._subscribing) {
+      this._i18n.unsubscribeDataChanging(this)
+      delete this._subscribing
+    }
+
     if (this._i18nWatcher) {
       this._i18nWatcher()
       delete this._i18nWatcher

diff --git a/src/util.js b/src/util.js
@@ -80,6 +80,15 @@ export function looseClone (obj: Object): Object {
   return JSON.parse(JSON.stringify(obj))
 }
 
+export function remove (arr: Array<any>, item: any): Array<any> | void {
+  if (arr.length) {
+    const index = arr.indexOf(item)
+    if (index > -1) {
+      return arr.splice(index, 1)
+    }
+  }
+}
+
 export const canUseDateTimeFormat: boolean =
   typeof Intl !== 'undefined' && typeof Intl.DateTimeFormat !== 'undefined'