javascript - Vue 没有对计算的 props 更改做出反应

Question

我在我的一个组件中使用 Vue 组合 API，并且在让组件从计算的 prop 更改中显示正确的渲染值时遇到了一些麻烦。似乎如果我将道具直接馈送到组件渲染中，它会做出应有的反应，但是当我通过计算属性传递它时它不会。

我不确定为什么会这样，因为我期望它在计算属性中也是反应性的？

这是我的代码：

应用程序.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>

测试者.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

我知道我可以使用观察者，但如果可以的话，我想避免这种情况，因为它现在的方式更清洁

标签： javascriptvue.jsvuejs2vuejs3vue-composition-api

Answer 1

不要破坏道具以保持其反应性setup({ testNumber })：

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