fix(mp): $refs use cache

jivan84 · Oct 11, 2022 · 98a5fea · 98a5fea
1 parent cdbb303
commit 98a5fea
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 110 deletions.
diff --git a/src/platforms/mp-jd/runtime/wrapper/util.js b/src/platforms/mp-jd/runtime/wrapper/util.js
diff --git a/src/platforms/mp-toutiao/runtime/wrapper/util.js b/src/platforms/mp-toutiao/runtime/wrapper/util.js
@@ -1,5 +1,6 @@
 import {
-  findVmByVueId
+  findVmByVueId,
+  initRefs as initRefsBase
 } from '../../../mp-weixin/runtime/wrapper/util'
 
 export const mocks = ['__route__', '__webviewId__', '__nodeid__', '__nodeId__']
@@ -13,26 +14,7 @@ export function initRefs (vm) {
   /* eslint-disable no-undef */
   const minorVersion = parseInt(tt.getSystemInfoSync().SDKVersion.split('.')[1])
   if (minorVersion > 16) {
-    Object.defineProperty(vm, '$refs', {
-      get () {
-        const $refs = {}
-        // mpInstance 销毁后 selectAllComponents 取值为 null
-        const components = mpInstance.selectAllComponents('.vue-ref') || []
-        components.forEach(component => {
-          const ref = component.dataset.ref
-          $refs[ref] = component.$vm || component
-        })
-        const forComponents = mpInstance.selectAllComponents('.vue-ref-in-for') || []
-        forComponents.forEach(component => {
-          const ref = component.dataset.ref
-          if (!$refs[ref]) {
-            $refs[ref] = []
-          }
-          $refs[ref].push(component.$vm || component)
-        })
-        return $refs
-      }
-    })
+    initRefsBase(vm)
   } else {
     mpInstance.selectAllComponents('.vue-ref', (components) => {
       components.forEach(component => {

diff --git a/src/platforms/mp-weixin/runtime/wrapper/util.js b/src/platforms/mp-weixin/runtime/wrapper/util.js
@@ -32,7 +32,7 @@ export function initRelation (detail) {
 }
 
 function selectAllComponents (mpInstance, selector, $refs) {
-  const components = mpInstance.selectAllComponents(selector)
+  const components = mpInstance.selectAllComponents(selector) || []
   components.forEach(component => {
     const ref = component.dataset.ref
     $refs[ref] = component.$vm || component
@@ -46,22 +46,41 @@ function selectAllComponents (mpInstance, selector, $refs) {
   })
 }
 
+export function syncRefs (refs, newRefs) {
+  const oldKeys = new Set(...Object.keys(refs))
+  const newKeys = Object.keys(newRefs)
+  newKeys.forEach(key => {
+    const oldValue = refs[key]
+    const newValue = newRefs[key]
+    if (Array.isArray(oldValue) && Array.isArray(newValue) && oldValue.length === newValue.length && newValue.every(value => oldValue.includes(value))) {
+      return
+    }
+    refs[key] = newValue
+    oldKeys.delete(key)
+  })
+  oldKeys.forEach(key => {
+    delete refs[key]
+  })
+  return refs
+}
+
 export function initRefs (vm) {
   const mpInstance = vm.$scope
+  const refs = {}
   Object.defineProperty(vm, '$refs', {
     get () {
       const $refs = {}
       selectAllComponents(mpInstance, '.vue-ref', $refs)
       // TODO 暂不考虑 for 中的 scoped
-      const forComponents = mpInstance.selectAllComponents('.vue-ref-in-for')
+      const forComponents = mpInstance.selectAllComponents('.vue-ref-in-for') || []
       forComponents.forEach(component => {
         const ref = component.dataset.ref
         if (!$refs[ref]) {
           $refs[ref] = []
         }
         $refs[ref].push(component.$vm || component)
       })
-      return $refs
+      return syncRefs(refs, $refs)
     }
   })
 }