Vue 3 <script setup> 中 a-input 输入数据后 watch 函数不触发问题的解决方案

<p>在 Vue 3 中，可以使用`ref`和`watch`函数来解决`<a-input>`输入数据后`watch`函数没有触发的问题。下面是一个示例代码：</p>
<pre><code class="language-vue">&lt;template&gt;
  &lt;table&gt;
    &lt;tr v-for=&quot;leftEar in leftEarData&quot; :key=&quot;leftEar.hz&quot;&gt;
      &lt;td class=&quot;col1&quot;&gt;
        &lt;a-input v-model:value=&quot;leftEar.result&quot; style=&quot;width: 50px&quot; /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref, watch } from 'vue';

const leftEarData = ref([]);

watch(leftEarData, (newValue) =&gt; {
  console.log(newValue);
  updateChart(newValue);
});
&lt;/script&gt;
</code></pre>
<p>在上面的代码中，我们使用了`ref`来创建响应式数据`leftEarData`，并在`watch`函数中监听它的变化。当`leftEarData`的值发生改变时，会调用`updateChart`函数进行相应的更新操作。</p>
<p>注意，在 Vue 3 中，在`<script setup>`中的变量和函数都是默认按需导入的，所以我们无需在代码中额外导入 Vue 的相关模块。</p>