동일한 페이지에서 여러 Vue 구성 요소의 성능 향상

동일한 페이지에서 여러 Vue 구성 요소의 성능 향상

동일한 뷰에 수백 또는 수천 개의 vue 구성 요소 인스턴스를 탑재하는 앱을 만들고 있다.각 구성 요소에는 vuex 저장소의 개체를 나타내는 ID가 있다.

<my-component :id="item1"></my-component>
<my-component :id="item2"></my-component>
<my-component :id="item3"></my-component>
...

스토어:

state: {
  myComponentData: [
    {
      id: 'item1',
      name: 'Hawaiian Shirt', 
      selected: false,
      // ...
    },
    // ...
  ]
}

인my-component, 나는 상점에서 그것의 물체를 찾아 계산된 속성에 저장한다.

computed: {
  myComponentData: function () {
    return this.$store.state.myComponentData.find(el => el.id === this.id);
  },
  isSelected: function () {
    return this.myComponentData.selected;
  },
  // ...
}

스토어의 객체 속성은 컴포넌트 자체 또는 앱의 다른 컴포넌트와 상호 작용하여 조작할 수 있다.

문제는 수백, 1000개 이상의 원소로 이것을 실행해 보면 로딩하는 데 30초 이상이 걸린다는 것이다.

계산된 속성을 제거하거나 정적 값으로 바꾸면 페이지가 원활하게 로드된다.스토어에서 계산된 모든 속성을 로드하려고 할 때에만 지연 문제가 발생한다.

계산된 속성과 Vuex를 사용하는 많은 (1500+) Vue 구성 요소를 로드할 때 성능을 향상시킬 수 있는 방법이 있는가?나는 가능한 해결책으로 동적/아신크 구성 요소, vue-async-c-c-computed 및 vue-rx를 조사했지만, 이 경우 어떤 것이 도움이 될지는 잘 모르겠다.

그 문제는 논리에 들어 있다.1000개의 항목이 있는 경우 1000개의 구성요소를 생성하십시오.그리고 나서 그들은 ID를 기반으로 적절한 항목을 찾기 위해 항목 목록을 반복한다.그래서 당신은 기본적으로 1000 * 1000 루프를 하고 있다.최악의 상황은 아니다 - 당신은 이 계산된 속성을 통해 반응성을 더하고 있다!무언가가 바뀔 때마다 계산된 방법이 다시 발사되어 다른 1000루프(항목이 마지막일 경우 최악의 경우 시나리오)로 이어진다.

몇 가지 옵션을 선택하십시오.

1. 구성 요소의 데이터를 설정하는 동안 스토어의 항목을 가져오십시오.이렇게 하면 계산된 속성이 생성되지 않으므로 정적 데이터가 생성될 수 있다.그러면 원하는 모든 데이터에 대해 개인 감시자를 만들게 될 것이다.

2. (이걸로 하겠어)상위 구성 요소에 목록을 표시하는 항목 목록이 있는 경우아이디만 패스하지 말고 전체 아이템을 패스해.이렇게 하면 계산된 속성을 사용할 필요가 없으며, 즉시 반응성을 가질 수 있다(프로포즈는 자동으로 하위 항목에서 업데이트됨).

그렇게 많은 루프 및 계산된 속성을 추가하지 마십시오. 이름에서 알 수 있듯이 다른 곳에서 필터링할 수 있는 항목을 필터링하는 것이 아니라 컴퓨팅을 위한 속성임;)

행운을 빈다!

내 생각에Array.find()운영비가 가장 많이 든다.계산된 속성에 있다는 것은 종속성이 변경될 때마다 실행된다는 것을 의미한다.

배열 인덱스를 가져올 수 있는 위치mounted()그리고 계산에 쓰세요,

export default {
  name: "MyComponent",
  props: ["id"],
  data() {
    return {
      storeIndex: -2
    };
  },
  mounted() {
    this.storeIndex = this.$store.state.myComponentData.findIndex(
      el => el.id == "item" + this.id
    );
  },
  computed: {
    myComponentData: function() {
      // return this.$store.state.myComponentData.find(
      //   el => el.id === "item" + this.id
      // );
      return this.$store.state.myComponentData[this.storeIndex] || {};
    },
    isSelected: function() {
      return this.myComponentData.selected;
    }
  }
};

여기 CodeSandbox가 작업 예시 입니다.

참조URL: https://stackoverflow.com/questions/52618629/improving-performance-for-many-vue-components-on-the-same-page