Vue.js 3：外部文件方法无法更新响应式值的解决方法

我在学习Vue.js 3，尝试通过外部文件定义的方法传递并更新响应式值，写了一个计数测试组件。组件内的increment1方法能正常更新count值（页面数字会增加），但调用外部文件的increment2方法时，count值无法更新，请问需要做哪些修改才能让increment2实现值更新？

相关源代码 #

计数组件代码

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { increment as increment2 } from './increment';

const count = ref(0);
const increment1 = () => {
  count.value++;
}

</script>

<template>
  <main>
      <p>Counter Value</p>
      <p>{{ count }}</p>
      <button @click="increment1()">Action1</button>
      <button @click="increment2(count)">Action2</button>
  </main>
</template>

外部 increment.ts 文件代码

export const increment = (count: number) => {
  count++;
}

问题原因 #

外部方法increment接收的参数类型是number，而组件中传递的count是Vue的响应式ref对象。虽然Vue模板中会自动对ref对象解包，但当把count作为参数传给外部方法时，会被解包成原始的数字值——修改这个原始值只是在方法内部创建了一个临时变量的副本，不会影响到组件中的响应式ref对象，所以页面不会更新。

两种解决办法 #

方法一：让外部方法接收Ref类型并直接修改value

修改外部increment.ts文件，让方法接收Ref<number>类型的参数，直接操作ref对象的value属性：

import type { Ref } from 'vue';

export const increment = (count: Ref<number>) => {
  count.value++;
}

组件中的调用代码不需要修改，保持@click="increment2(count)"即可。

方法二：外部方法返回新值，组件内赋值

把外部方法改成纯函数，返回递增后的数值，然后在组件中把返回值赋值给count.value：
修改外部increment.ts文件：

export const increment = (count: number) => {
  return count + 1;
}

修改组件模板中的按钮点击事件：

<button @click="count.value = increment2(count)">Action2</button>

版本信息 #

• Vue.js 3.2.27
• TypeScript 4.7.4

内容的提问来源于stack exchange，提问作者リッキーさん