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++的参数的引用操作
在 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
对象的值,从而保持响应性。
此模式抛出TypeScript错误: 类型为“(string | number)[]”的参数不能分配给类型为“string[]| number[]”的参数 我理解这是因为TypeScript编译器会将其视为字符串和数字混合的数组。 是否有一种类型安全的方法来实现这一点?我只能想投给任何感觉不好的[]:
问题内容: 如何在不执行“父”函数或不使用函数的情况下将函数作为参数传递?(因为我已经读到它是不安全的。) 我有这个: 它可以工作,但是问题是在调用函数时触发,而不是在函数中使用时触发。 根据我所读的内容,我可以使用来解决它,但这不是最佳实践。如何在JavaScript中将函数作为参数传递? 问题答案: 您只需要删除括号: 然后,这将传递函数而不先执行它。 这是一个例子:
我在更新react native和react后出现此错误 我认为这是正确的语法,但我不知道为什么显示这个错误: SyntaxError:导出时出现意外标记= 。在模块上运行InthisContext(vm.js:53:16) _在对象上编译(module.js:387:25) 。模块_扩展。。js(module.js:422:10) 在模块中。在函数处加载(module.js:357:32) 。模
问题内容: 在Java中,我可以做类似的事情 然后稍后在方法中“运行”代码。处理(匿名内部类)很痛苦,但是可以做到。 Go是否有可以促进函数/回调作为参数传递的内容? 问题答案: 是的,请考虑以下示例: 播放:http://play.golang.org/p/XNMtrDUDS0 导览:https : //tour.golang.org/moretypes/25(函数闭包)
问题内容: 我已经熟悉Android框架和Java,并希望创建一个通用的“ NetworkHelper”类,该类可以处理大多数联网代码,使我能够从中调用网页。 我遵循了来自developer.android.com的这篇文章来创建我的网络类:http : //developer.android.com/training/basics/network- ops/connecting.html 码:
问题内容: 我正在读一本教科书,我想知道我们传递给函数的参数为什么既不是原始的也不是用户定义的类实例。 我知道它是这两个之一。但是似乎在这里它传递了用户定义的构造方法,例如Runnable()。看来他们想在以后运行线程,但是什么时候?我认为这是合法的,但是我在Java类中从未听说过这种事情。 问题答案: 实际上,这是传递实现Runnable接口的匿名内部类的实例。在Java教程中阅读有关它们的