vue 路由跳转很慢，页面卡死

现象：页面在跳转时，路由发生了改变，但是页面还停留在上一个路由的页面原因：在路由跳转时，vue销毁页面数据用时过长，导致页面卡顿。经过排查发现页面中有一个select下拉选择框，数组有1w+,造成了页面卡死现象。解决：//在获取数据时进行处理，只展示10条async getUserList() {let data = await getUserList({})this.allUserLists =

牛奋奋

12118人浏览 · 2022-05-26 18:24:42

牛奋奋 · 2022-05-26 18:24:42 发布

现象：页面在跳转时，路由发生了改变，但是页面还停留在上一个路由的页面

原因：在路由跳转时，vue销毁页面数据用时过长，导致页面卡顿。经过排查发现页面中有一个select下拉选择框，数组有1w+,造成了页面卡死现象。

解决：

//在获取数据时进行处理，只展示10条
 async getUserList() {
      let data = await getUserList({})
      this.allUserLists = data.fst.map(item => {
        return { id: item.id, name: item.name, type: 'USER', code: item.code }
      })
      if (this.allUserLists.length > 10) {
        this.users = this.allUserLists.slice(0, 10)
      } else {
        this.users = this.allUserLists
      }
    }

 // 添加到下拉列表中    
addOptions(id) {
      const target = this.allUserLists.find(item => {
        return item.id === id
      })
      if (target) {
        if (this.users.every(item => item.id !== target.id)) {
          this.users.unshift(target)
        }
      }
    },
//接口返回的数据
  let resUserList = this.effect.actionDetail.exempt.condition.subject
      resUserList.forEach(x => {
        this.addOptions(x.id)
      })