typescript - Vue3+TypeScript: ref<number>作为参数传入函数时实时响应失效问题？

Question

vue3+typescript，ref<number>作为参数传入函数时，实时响应失效，直接作为number类型传入

    sleep(ms) {      return new Promise(resolve => setTimeout(resolve, ms))    }    ,    async control(process: ref<number>, array) {      for (let i = 0; i < array.length; i++) {        await this.sleep(75);        process = array[i];        console.log(this.process_value_1)        if (this.page_judge === false) {          process = 0          return null        }      }      process = 100    },    async start() {      this.page_judge = true      this.button_switch = 2      this.upload_switch = 1      if (this.page_judge) {        await this.control(this.process_value_1, this.process_1_array);        await this.control(this.process_value_2, this.process_2_array);        await this.control(this.process_value_3, this.process_3_array);        this.page_judge = false;      }    },    cancel() {      this.page_judge = false      this.process_value_1 = 0      this.process_value_2 = 0      this.process_value_3 = 0      this.upload_switch = 0      this.button_switch = 0    }

如果改为reactive的话，因为这样是对象，不对进行深拷贝，地址不变，但是要改很多代码，有没有类似于C++的参数的引用操作

Answer 1

在 Vue 3 和 TypeScript 中，ref 是一个特殊的响应式对象，它包含一个值和一个用于跟踪其响应性的函数。当你直接尝试将一个 ref 对象赋值给另一个变量时，你实际上只是复制了 ref 对象本身，而不是其内部的响应式值。因此，在函数内部修改 ref 对象不会触发组件的重新渲染。

为了解决这个问题，你可以通过解包 ref 对象来获取其值，并在函数内部直接修改该值。这可以通过使用 .value 属性来实现。另外，Vue 3 提供了 toRefs 函数，它可以将一个响应式对象转换为一个包含其属性作为独立 ref 对象的对象。

以下是如何修改你的代码以正确地在函数内部更新 ref 对象的值：

import { ref, toRefs } from 'vue';export default {  setup() {    const state = reactive({      process_value_1: ref(0),      process_value_2: ref(0),      process_value_3: ref(0),      process_1_array: [],      process_2_array: [],      process_3_array: [],      page_judge: true,      button_switch: 0,      upload_switch: 0,    });    const { process_value_1, process_value_2, process_value_3, process_1_array, process_2_array, process_3_array, page_judge, button_switch, upload_switch } = toRefs(state);    function sleep(ms) {      return new Promise(resolve => setTimeout(resolve, ms));    }    async function control(process: Ref<number>, array: number[]) {      for (let i = 0; i < array.length; i++) {        await sleep(75);        process.value = array[i]; // 使用 .value 来更新 ref 的值        console.log(process.value);        if (page_judge.value === false) {          process.value = 0;          return null;        }      }      process.value = 100;    }    async function start() {      page_judge.value = true;      button_switch.value = 2;      upload_switch.value = 1;      if (page_judge.value) {        await control(process_value_1, process_1_array);        await control(process_value_2, process_2_array);        await control(process_value_3, process_3_array);        page_judge.value = false;      }    }    function cancel() {      page_judge.value = false;      process_value_1.value = 0;      process_value_2.value = 0;      process_value_3.value = 0;      upload_switch.value = 0;      button_switch.value = 0;    }    return {      process_value_1,      process_value_2,      process_value_3,      process_1_array,      process_2_array,      process_3_array,      page_judge,      button_switch,      upload_switch,      control,      start,      cancel,    };  },};

在这个修改后的代码中，我们使用了 reactive 来创建一个响应式状态对象，并使用 toRefs 将其转换为包含 ref 对象的对象。然后，我们可以在函数内部通过 .value 属性来访问和更新这些 ref 对象的值，从而保持响应性。