修复一个很奇怪的渲染性能问题

Author: buuing

src/search-node.vue

@@ -50,9 +50,9 @@ export default {
           {
             root.$scopedSlots.default ? root.$scopedSlots.default(data) : <p class="tree-text">
               {
-                data.$keys?.length ? data[name].split('').map(
-                  (curr, i) => <span style={{ color: data.$keys.indexOf(i) > -1 ? 'red': '#666' }}>{curr}</span>
-                ) : <span style={{ color: '#666' }}>{data[name]}</span>
+                data.$keys.length ? data[name].split('').map((curr, i) => {
+                  return <span class={ data.$keys.includes(i) ? 'red': 'gary' }>{curr}</span>
+                }) : <span class="gary">{data[name]}</span>
               }
             </p>
           }
@@ -141,4 +141,10 @@ export default {
   .point {
     cursor: pointer;
   }
+  .red {
+    color: red;
+  }
+  .gary {
+    color: gray;
+  }
 </style>

src/search-tree.vue

@@ -61,10 +61,6 @@ export default {
       type: Array,
       default: () => []
     },
-    clearRecovery: {       // 清空搜索关键词时, 是否复原排序顺序
-      type: Boolean,
-      default: false
-    },
     props: {               // 配置项
       type: Object,
       default: () => {
@@ -104,14 +100,17 @@ export default {
     _search (val) {
       clearTimeout(this.timer)
       this.timer = setTimeout(_ => {
-        if (val || !this.clearRecovery) return this.deepData = this._getLdqTree(this.deepData)
+        if (val) return this.deepData = this._getLdqTree(this.deepData)
+        const keys = this.showCheckbox ? this.getCheckedKeys() : []
         /**
-         * 如果清空搜索关键词时, 开启了复原初始结构 clearRecovery = true 时
-         * 经测试 4k+ 的单一树节点卡顿在15秒左右, 建议分散处理可以降到2秒左右
+         * 这里必须先清空数据, 再进行赋值, 不然会产生严重的性能问题
+         * 很有可能是vue内部对多次赋值操作进行合并所产生的
          */
-        const keys = this.showCheckbox ? this.getCheckedKeys() : []
-        this.deepData = deepCopy(this.sourceData)
-        this.setCheckedByKeys(keys, true)
+        this.deepData = []
+        this.$nextTick(_ => {
+          this.deepData = deepCopy(this.sourceData)
+          this.setCheckedByKeys(keys, true)
+        })
       }, this.searchDebounce)
     }
   },
@@ -199,12 +198,12 @@ export default {
     },
     _initData () { // 初始化数据
       const { children } = this.defaultProps
-      const _deep = (arr, parent) => {
+      const dfs = (arr, parent) => {
         let checkedNum = 0, anyOne = false
         arr.forEach(item => {
           this._initNode(item, parent)
           checkedNum += +item.checked
-          item[children].length && _deep(item[children], item)
+          item[children].length && dfs(item[children], item)
           item.expand && parent && (parent.expand = true)
           if (item.indeterminate) anyOne = true
         })
@@ -215,7 +214,7 @@ export default {
           parent.indeterminate = anyOne || (!!checkedNum && checkedNum != arr.length) || (!parent.checked && !!this._preorder(arr, item => item.checked))
         }
       }
-      _deep(this.sourceData)
+      dfs(this.sourceData)
       const data = deepCopy(this.sourceData)
       this.deepData = this._getLdqTree(data)
     },

src/utils.js

@@ -1,6 +1,6 @@
 // 计算匹配优先值
 export const computSortNum = keys => {
-  keys = JSON.parse(JSON.stringify(keys))
+  keys = keys.slice(0)
   let lev = 0, curr = keys.shift()
   return keys.length < 1 ? +!!(curr + 1) : keys.reduce((s, next, i) => {
     if (next - curr === 1) lev += 1
@@ -21,7 +21,7 @@ export const getSortData = arr => {
 export const getDictionary = (name, word) => {
   word = word.replace(/\s*/g, '')
   let res = []
-  const _deep = word => {
+  const dfs = word => {
     let keys = [], len = word.length
     for (let i = len; i > 0; i--) {
       for (let j = 0; j < len + 1 - i; j++) {
@@ -39,10 +39,10 @@ export const getDictionary = (name, word) => {
       return true
     })) return false
     while (step > index) res.push(index++)
-    if (start - 0) _deep(word.slice(0, start))
-    if (end - len) _deep(word.slice(end, len))
+    if (start - 0) dfs(word.slice(0, start))
+    if (end - len) dfs(word.slice(end, len))
   }
-  _deep(word)
+  dfs(word)
   return res
 }
 // 深拷贝 (这个随便复制的)