계산된 소품 변경에 반응하지 않는 Vue

계산된 소품 변경에 반응하지 않는 Vue

컴포넌트 중 하나에서 Vue composition API를 사용하고 있는데 계산된 프로펠러 변경에서 올바른 렌더링 값을 나타내는 컴포넌트를 얻는 데 문제가 있습니다.컴포넌트에 직접 프로펠러를 삽입하면 정상적으로 반응하지만 계산된 속성을 통해 전달하면 그렇지 않습니다.

계산된 속성에서도 반응적일 것으로 예상했는데 왜 그런지 잘 모르겠습니다.

코드는 다음과 같습니다.

App.vue

<template>
  <div id="app">
    <Tester :testNumber="testNumber" />
  </div>
</template>

<script>
import Tester from "./components/Tester";

export default {
  name: "App",
  components: {
    Tester,
  },
  data() {
    return {
      testNumber: 1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.testNumber = 2;
    }, 2000);
  },
};
</script>

Tester.vue

<template>
  <div>
    <p>Here is the number straight from the props: {{ testNumber }}</p>
    <p>
      Here is the number when it goes through computed (does not update):
      {{ testNumberComputed }}
    </p>
  </div>
</template>

<script>
import { computed } from "@vue/composition-api";

export default {
  props: {
    testNumber: {
      type: Number,
      required: true,
    },
  },
  setup({ testNumber }) {
    return {
      testNumberComputed: computed(() => {
        return testNumber;
      }),
    };
  },
};
</script>

다음은 작업 코드 및 상자입니다.

https://codesandbox.io/s/vue-composition-api-example-forked-l4xpo?file=/src/컴포넌트/Tester.vue

워처를 사용할 수 있다는 것은 알고 있습니다만, 가능하면 피하고 싶습니다.현재로서는 깨끗해지기 때문입니다.

반응성을 유지하기 위해 프로펠러를 파괴하지 마십시오.

setup(props) {
return {
  testNumberComputed: computed(() => {
    return props.testNumber;
  }),
};
}

언급URL : https://stackoverflow.com/questions/67701816/vue-not-reacting-to-a-computed-props-change