带搜索的Tree 树形控件优化----基于vue-worker

前提：带搜索的Tree 树形控件，因为数据量比较大，（我这个场景时2w+数据），在搜索时不可避免的出现了渲染阻塞的情况。

这个是筛选的条件函数： filterNode(value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; },

阻塞的原因是cpu一方面要进行页面的渲染，一方面还要进行大量的筛选操作，所以就导致了阻塞卡顿。 理想的情况是cpu以渲染为主，加上少量的计算操作。

为了解决这个问题，我想到了之前了解到的web worker,web worker的原理是开一个另外的线程来负责密集计算，让主线程更加专注于渲染任务。

web worker 是原生的方法（这里就不说了，有兴趣自己找下相关文章），我这里的项目是vue项目，所以就直接说vue项目中的插件---vue-worker.

安装： npm i vue-worker --save

注册： import Vue from 'vue' import VueWorker from 'vue-worker' // Web worker插件 Vue.use(VueWorker)

我这里的区域目录结构类似： data:[ name:'学校'， id："1", children:[ name:'校区'， id："2", children:[ ... ] ]， ... ]

搜索框的值： filterText：null

绑定搜索框方法：

handleinput(){
          this.$nextTick(()=>{
            this.$worker.run((data, value) => {
                // 定义递归方法，接收一个数组
                function deepFilter(list) {
                    return list.filter(item => {
                        let children=item.children?item.children:[]
                        if(item.children){
                          item.children = deepFilter(item.children)
                        }
                        if(item.children&&item.children.length){
                          return item
                        }else{
                          if(children.length){
                            item.children=children
                          }
                          return  item.name.indexOf(value) !== -1
                        }
                    })
                }
                let map1=null
                map1=deepFilter(data)
                return map1
              }, [this.treeListcopy, this.filterText]).then(res => {
              this.treeList=JSON.parse(JSON.stringify(res))
              console.log("worker结果------",this.treeList)
            }).catch(error=>{
              console.log("错误",error);
            })
          })          
        },

具体流程就不说了，有兴趣自己看下（我只是记录自己的学习经历）

不使用结果：

使用web worker 的优化结果：

就到这里结束了。