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

Posted

技术标签:

【中文标题】Vue 没有对计算的 props 更改做出反应【英文标题】:Vue not reacting to a computed props change 【发布时间】:2021-08-14 12:21:09 【问题描述】:

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

我不确定为什么会像我预期的那样在计算属性中也是反应性的?

这是我的代码:

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

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

以上是关于Vue 没有对计算的 props 更改做出反应的主要内容,如果未能解决你的问题,请参考以下文章

Vue js watcher 对更改没有反应

对道具更改做出反应重新渲染

即使道具没有改变,为啥还要对重新渲染组件做出反应?

路由更改时对获取数据做出反应

对路由器更改做出反应重新安装

为啥 vuelidate 验证器不再对输入更改做出反应?