vue3 模板语法？

Question

// a-select 无法对 value 的变化进行反应
<template>
    <a-select :="api" ... />
</template>

<script setup lang="ts">
    ...
    const { value } = defineProps(['value']);
    const api = {  value , ...     }
</script>  

// a-select 可以对 value 的变化进行反应
<template>
    <a-select :value="value"  :="api" ... />
</template>

<script setup lang="ts">
    ...
    const { value } = defineProps(['value']);
    const api = {    ...     }
</script>  

这是什么原因导致的呢？
我想维持 const api = { value , ... } 这样的写法要如何做呢？

"ant-design-vue": "^4.0.2", 
"vue": "^3.2.45",

Answer 1

首先value是响应式数据，下面的写法，value更新会触发template的更新，而上面的写法，api不是一个响应式数据，value的改变不会通知到template，让组件进行更新，可以使用watch或computed等