Vue 구성 요소 프로펠러 변경이 리렌더를 트리거하지 않음

Vue 구성 요소 프로펠러 변경이 리렌더를 트리거하지 않음

내 Vue 2 애플리케이션에서 나는 소품으로 루트 구성 요소에서 일부 하위 구성 요소로 전달되는 큰 개체를 가지고 있다.개체의 속성을 변경하면 하위 구성 요소가 업데이트 및 렌더링되어야 한다.어떤 경우에는 그렇지 않고, 어떤 경우에는 그렇지 않은 경우도 있다.나는 그것이 왜 작동하지 않는지 알아내는 데 도움이 필요하다.

다음은 업데이트되지 않는 하위 구성 요소:

<template>
<div class="upgradeBar">
    {{level}}
    <div
            v-for="lvlNum in maxLevel + 1"
            class="level"
            v-bind:class="{reached: isLevelReached(lvlNum - 1)}"
    ></div>

    <button
            class="btnUpgrade"
            @click="onLevelUp()"
            v-if="!isLevelReached(maxLevel)"
    >
        +
    </button>
</div>
</template>


<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import Upgradable from "../../../models/Upgradable";

@Component()
export default class UpgradeBar extends Vue {
    name: 'UpgradeBar';

    @Prop() entity: Upgradable;

    get level(): number {
        return this.entity.level;
    }

    get maxLevel(): number {
        return this.entity.MAX_LEVEL;
    }

    onLevelUp() {
        this.entity.levelUp();
    }

    isLevelReached(level: number): Boolean {
        return this.entity.level >= level;
    }
}
</script>

구성 요소는 다음과 같이 호출된다.

<UpgradeBar :entity="entity" />

모든 코드가 통한다.클릭할 때btnUpgrade단추를 끼우다레벨이 변경된 것은 맞지만, 변경 사항을 보려면 구성 요소를 닫고 다시 열어야 한다.또한 브라우저 개발 도구는 즉시 변화를 보여주지 않는다.디버거의 값을 새로 고치려면 구성 요소를 클릭해야 한다.

편집: Theentity수업은 기본적으로 다음과 같이 보인다.

class Entity {
    name: string = 'some name';
    level: number = 1;
}

더 깊이 찾아봤더니 이렇게 요약되는 것 같다.개체의 속성 중 일부는 반응성이 있고(vue에 의해 생성된 게터/세터가 있음) 일부는 그렇지 않다. entity.name세터를 가지고 있기 때문에 그것을 변경하면 구성요소가 업데이트된다. entity.level하지 않다여기 질문이 있다:왜 그들은 다르게 대우받는가?로그:

코드를 보지 않고는 확실히 알 수 없다.entity.levelUp, 그러나 그것은 반응성 문제처럼 보인다 , 그것은 사용으로 해결될 수 있다.Vue.$set그 기능 안에서.

추가하면 이 사실을 확인할 수 있다.this.$forceUpdate();다음에this.entity.levelUp();

갱신하다

this._level = this._level + 1;

로 바꿀 수 있다.

Vue.$set(this, _level, this._level + 1);$set 함수에 액세스하려면 해당 구성 요소/파일에서 Vue를 가져와야 함

개체를 변경하는 코드를 표시하지 않고(또는 찾을 수 없음) 사용 중이십니까?$set()또는Vue.set()단순히 오브젝트의 속성을 직접 변경하지 않고일반적으로 반응성 제한으로 인해 속성을 직접 변경하는 것은 작동하지 않음

---

추가할 편집:

이제 알겠다.내 생각에 당신은 다음과 같은 것을 원하는 것 같다.

this.$set(this, '_level', this._level + 1);

참조URL: https://stackoverflow.com/questions/50159583/vue-component-prop-change-does-not-trigger-rerender