VueJ 상위 업데이트 시 하위 구성 요소가 업데이트되지 않도록 함

VueJ 상위 업데이트 시 하위 구성 요소가 업데이트되지 않도록 함

스택: Vue 2.6.11 Vuex 3.6.0

문제:중첩된 많은 컴포넌트가 있으며, 이 컴포넌트는 다시 호버 컴포넌트로 감싸집니다.(처음에는 vuetify를 사용했지만 이후 디버깅을 위해 자체 호버 컴포넌트를 만들었습니다.보시다시피 데이터 변경은 호버 구성 요소 내에서만 발생합니다.부울이 변경됩니다.그러나 업데이트 이벤트는 모든 아이에 대해 트리거됩니다.물론 우리는 여전히 모든 아이들에게 실제 업데이트가 반응적이기를 원합니다.이들은 결코 정적 구성요소가 아닙니다.다만, 그 컴포넌트에 대해서 실제로 업데이트가 되었을 때만 컴포넌트를 업데이트 해 주었으면 합니다.라이브 어플리케이션에는 최대 2000~3000개의 어플리케이션이 있습니다.<D> ... </D>컴포넌트 및 한층 더 깊이 중첩된 구조입니다.

호버 구성 요소:

<template>
  <div @mouseenter="hover = true" @mouseleave="hover = false">
    <slot :hover="hover"/>
  </div>
</template>
<script>
  export default {
    data: () => ({
      hover: false,
    }),
  }
</script>

vue 슬롯 시스템과 vuex의 getter를 사용하는 중첩된 구성 요소:

<A :a="getA(1)">
  <template #bs="{a}">
    <hoverOwn v-for="(b_id, b_index) in a.bs" :key="b_index">
      <template #default="hover_b">
        <B :b="getB(b_id)" :style="hover_b.hover?'background-color: green':''">
          <template #cs="{b}">
            <hoverOwn v-for="(c_id, c_index) in b.cs" :key="c_index">
              <template #default="c_hover">
                <C :c="getC(c_id)" :style="c_hover.hover?'background-color: blue':''">
                  <template #ds="{c}">
                    <hoverOwn v-for="(d_id, d_index) in c.ds" :key="d_index">
                      <template #default="d_hover">
                        <D @click.native="getD(d_id).value = !getD(d_id).value" :d="getD(d_id)" :style="d_hover.hover?'background-color: red':''">
                          <template #d>
                            <div v-if="d_hover.hover">t</div>
                          </template>
                        </D>
                      </template>
                    </hoverOwn>
                  </template>
                </C>
              </template>
            </hoverOwn>
          </template>
        </B>
      </template>
    </hoverOwn>
  </template>
</A>

렌더링 방법은 다음과 같습니다.

vue js 업데이트 후크를 통해 업데이트되면 각 구성 요소가 콘솔에 인쇄됩니다.

updated() {
   console.log('D updated');
}

A 영역을 맴돌면 콘솔은 다음을 인쇄합니다.

D updated
D updated
D updated
D updated
C updated
D updated
D updated
D updated
D updated
C updated
D updated
D updated
D updated
D updated
C updated
D updated
D updated
D updated
D updated
C updated
D updated
D updated
D updated
D updated
C updated
B updated

예제 데이터는 다음과 같습니다.

{
as: {
    1: {bs: [1,2]}
  },
  bs: {
    1: {cs: [1,2,3,4,5]},
    2: {cs: [6,7,8,9,10]},
  },
  cs: {
    1: {ds: [1,2,3,4]},
    2: {ds: [5,6,7,8]},
    3: {ds: [9,10,11,12]},
    4: {ds: [13,14,15,16]},
    5: {ds: [17,18,19,20]},
    6: {ds: [21,22,23,24]},
    7: {ds: [25,26,27,28]},
    8: {ds: [29,30,31,32]},
    9: {ds: [33,34,35,36]},
    10: {ds: [37,38,39,40]},
  },
  ds: {
    1: {id: 1, value: false},
    2: {id: 2, value: false},
    3: {id: 3, value: false},
    4: {id: 4, value: false},
    5: {id: 5, value: false},
    6: {id: 6, value: false},
    7: {id: 7, value: false},
    8: {id: 8, value: false},
    9: {id: 9, value: false},
    10: {id: 10, value: false},
    11: {id: 11, value: false},
    12: {id: 12, value: false},
    13: {id: 13, value: false},
    14: {id: 14, value: false},
    15: {id: 15, value: false},
    16: {id: 16, value: false},
    17: {id: 17, value: false},
    18: {id: 18, value: false},
    19: {id: 19, value: false},
    20: {id: 20, value: false},
    21: {id: 21, value: false},
    22: {id: 22, value: false},
    23: {id: 23, value: false},
    24: {id: 24, value: false},
    25: {id: 25, value: false},
    26: {id: 26, value: false},
    27: {id: 27, value: false},
    28: {id: 28, value: false},
    29: {id: 29, value: false},
    30: {id: 30, value: false},
    31: {id: 31, value: false},
    32: {id: 32, value: false},
    33: {id: 33, value: false},
    34: {id: 34, value: false},
    35: {id: 35, value: false},
    36: {id: 36, value: false},
    37: {id: 37, value: false},
    38: {id: 38, value: false},
    39: {id: 39, value: false},
    40: {id: 40, value: false},
  }
}

테스트한 솔루션:

1. 우리는 vue 3이 이 문제를 해결하기를 바랐지만 안타깝게도 그렇지 않습니다.이 샘플 프로젝트는 vue 2와 vue 3으로 작성되었으며 둘 다 동일한 결과를 보여줍니다.

2. 순수 CSS 기반의 호버 솔루션을 작성하려고 합니다.하지만 이 정보를 변수로 사용하는 것도 좋아하기 때문에 좋은 해결책은 아닙니다.

3. vuex 내의 데이터를 관리하고 컴포넌트에 로드하는 방법은 여러 가지가 있습니다.그러나 이 문제는 항상 vue 구성 요소를 업데이트할 때 발생하며 다른 vuex 솔루션에서도 변경되지 않습니다.

도와주셔서 고맙습니다.

건배.

라파엘

언급URL : https://stackoverflow.com/questions/65394554/vuejs-prevent-child-components-from-updating-when-parent-updates