fix(perf): reactivity issues with bvAttrs and bvListeners (closes #5520) (#5753)

jacobmllr95 · web-flow · commit d83a2b179cac · 2020-09-10T09:44:00.000+02:00
* fix(b-table): reactivity issues for dynamically added listeners * Revert "fix(b-table): reactivity issues for dynamically added listeners" This reverts commit 70fe168. * Update cache.js * Update cache.js
diff --git a/src/utils/cache.js b/src/utils/cache.js
@@ -1,29 +1,35 @@
-import { hasOwnProperty } from './object'
+import cloneDeep from './clone-deep'
+import looseEqual from './loose-equal'
+import { hasOwnProperty, keys } from './object'
+
+const isEmpty = value => !value || keys(value).length === 0
 
 export const makePropWatcher = propName => ({
-  handler(newVal, oldVal) {
-    for (const key in oldVal) {
-      if (!hasOwnProperty(newVal, key)) {
+  handler(newValue, oldValue) {
+    if (looseEqual(newValue, oldValue)) {
+      return
+    }
+    if (isEmpty(newValue) || isEmpty(oldValue)) {
+      this[propName] = cloneDeep(newValue)
+      return
+    }
+    for (const key in oldValue) {
+      if (!hasOwnProperty(newValue, key)) {
         this.$delete(this.$data[propName], key)
       }
     }
-    for (const key in newVal) {
-      this.$set(this.$data[propName], key, newVal[key])
+    for (const key in newValue) {
+      this.$set(this.$data[propName], key, newValue[key])
     }
   }
 })
 
 export const makePropCacheMixin = (propName, proxyPropName) => ({
   data() {
-    return {
-      [proxyPropName]: {}
-    }
+    return { [proxyPropName]: cloneDeep(this[propName]) }
   },
   watch: {
     // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
     [propName]: makePropWatcher(proxyPropName)
-  },
-  created() {
-    this[proxyPropName] = { ...this[propName] }
   }
 })
