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 更改做出反应的主要内容,如果未能解决你的问题,请参考以下文章