Я использую API композиции Vue в одном из моих компонентов, и у меня возникли проблемы с получением компонента, отображающего правильное отображаемое значение из вычисленного изменения свойства. Кажется, что если я загружаю опору непосредственно в компоненты, он реагирует так, как должен, но когда я передаю его через вычисляемое свойство, это не так.
Я не уверен, почему это так, как я ожидал, он будет реактивным и в вычисляемом свойстве?
Вот мой код:
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/components/Tester.vue.
Я знаю, что могу использовать наблюдателя, но я бы хотел избежать этого, если смогу, так как он чище, чем я сейчас пользуюсь.