가속 vue 구성 요소 렌 더 링 성능 최적화

2560 단어 vue구성 요소 렌 더 링성능 최적화
배경
평소에 vue 로 백 스테이지 관리 시스템 을 개발 할 때 대량의 table 라 는 구성 요 소 를 사용 해 야 합 니 다.정상 적 인 구성 요 소 는 프로젝트 에서 2 차 패 키 징 을 한 다음 에 표 두 title 에 대해 매개 변수 화 설정 을 합 니 다.다음 과 같 습 니 다.

export default {
  data(){
    return {
      tableTitle:[
        {
          label:'  ',
          prop:'prop'
        },
        {
          label:'  ',
          prop:'prop'
        },
        {
          label:'  ',
          prop:'prop',
          colconfig:[
            {
              label:'  ',
              prop:'prop'
            }
          ]
        }
        ...
      ]
    }
  }
}
이때 table 필드 가 많 고 다 중 헤더 라면 데이터 구조 가 복잡 합 니 다.data 에 직접 쓰 면 구성 요소 가 초기 화 될 때 이 대상 을 재 귀적 으로 get set 속성 을 다시 씁 니 다.소스 코드 는 다음 과 같 습 니 다.

function defineReactive(obj,key,val) {
 var dep = new Dep();
 var property = Object.getOwnPropertyDescriptor(obj, key);
 //       ，     ，    get set  
 if (property && property.configurable === false) {
  return
 }
 //observe     defineReactive，        get set  
 var childOb = !shallow && observe(val);
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {
  },
  set: function reactiveSetter (newVal) {
  }
 });
}
그러나 이런 정적 데 이 터 는 동적 응답 이 필요 하지 않다.그러면 반드시 파도 성능 낭 비 를 초래 할 것 이다.그래서 우 리 는 이런 불필요 한 성능 낭 비 를 피 할 방법 을 강구 한다.
프로젝트 1
이 때 우 리 는 Object.freeze()라 는 방법 으로 이 데 이 터 를 동결 할 수 있 습 니 다.vue 구성 요 소 는 data 의 속성 을 차단 할 때 동 결 된 대상 이 수정 할 수 없 는[상기 코드 주석]이 라 고 판단 하고 get set 작업 을 직접 건 너 뛰 면 vue 구성 요소 의 render 시간 을 낮 추고 페이지 성능 을 향상 시 킬 수 있 습 니 다.

export default {

data(){
  return {
    tableTitle:Object.freeze(objConfig)
  }
}
}
방안 2
동적 응답 이 필요 없 는 데 이 터 를 created 의 생명주기 에서 정의 하면 vue 밑바닥 에서 이 속성 을 차단 하지 않 습 니 다

export default {
  created(){
    this.tableTitle = [xxxxx]
  }
}
총결산
사실 이런 장면 은 개발 과정 에서 자주 볼 수 있다.예 를 들 어 조회 조건 에 selectlist 필드 가 많 기 때문에 우 리 는 이 를 큰 json 에 밀봉 한 다음 에 재 작성 속성 을 피 할 수 있 고 많은 성능 비용 을 낮 출 수 있다.
vue 구성 요소 렌 더 링 을 가속 화 하 는 성능 최적화 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 구성 요소 렌 더 링 성능 최적화 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 저 희 를 많이 사랑 해 주세요!
php 구현 ping
데이터베이스 저장 프로 세 스 를 PHP 로 호출 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage