如何立即渲染数组的每个生成元素

Answer 1

如果您像上面那样在主 UI 线程上同步生成单词，则不能。更新 UI 的线程与运行 JavaScript 代码的线程相同，在循环运行时不能运行其他任何线程。您可以将生成移动到工作线程，并在生成单词时将其post每个单词（或小批量单词）到您的 Vue 代码中。即使工作线程仍在生成其他单词，在主 UI 线程上运行的 Vue 代码也可以自由渲染该单词/那些单词。

以下是基于现有循环的工作脚本的粗略示例：

self.addEventListener("message", (e) => {
    if (e.data?.type === "start") {
        generateWords();
    }
});

function generateWords() {
    const count = 10000;
    let symbols = "abcdefghijklmnopqrstuvwxyz1234567890";
    let word = "";
    for (let i = 0; count > i; i++) {
        while (word.length < 100) {
            word += symbols[Math.floor(Math.random() * symbols.length)];
        }
        self.postMessage({ type: "word", word });
        word = "";
    }
}

然后是启动进程并监听结果的代码：

const worker = new Worker("./worker.js");
worker.addEventListener("message", (e) => {
    if (e.data?.type === "word") {
        // ...use `e.data.word` here, it's the word that was received...
    }
});
worker.postMessage({ type: "start" });

您必须对其进行调整以适应您的 Vue 代码，但这是基本方法。