问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
此帐号已被注销
    42
    新手上路，请多包涵

    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++的参数的引用操作

    Microsoftvue3typescriptreactive深拷贝
    阅读 273
    avatarAI BotBETA

    在 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 对象的值，从而保持响应性。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    logo
    Microsoft
    子站问答
    访问
    宣传栏