Electron-vue怎么让页面更新

Question

问题描述

目前遇到的问题是使用fs模块读取多个文件夹，想在读取每个文件夹时在页面显示“当前正在读取XXXX”，但是现在的情况是一整块代码块运行完后，页面才会更新。也就是期望如果要读取三个文件夹，在data中定义了msg字段，就按遍历顺序给msg赋值“正在读取1”“正在读取2”“正在读取3”，结果目前效果是直接只会显示“正在读取3”

问题出现的环境背景及自己尝试过哪些方法

因为是初用electron-vue，经过一番搜索后用ipc通信在主进程赋值后传给渲染进程监听，结果并没有用，也尝试过使用vuex来传值，一样没用

相关代码

  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
        ...
        let dirArr = ["c:\\1","c:\\2","c:\\3",];
        dirArr.forEach(item=>{
            this.msg="正在读取XXX" //页面{{msg}}不会挨个显示，只会直接显示最后一次
            fs.readFileSync(item,'utf8')
        })
        ...
    }
  }

Answer 1

问题

一整块代码块运行完后，页面才会更新

因为 JavaScript 是一门单线程语言，指令是一条一条执行的。你在页面加载的hook函数init里执行代码，肯定会阻塞页面的正常加载。

目前效果是直接只会显示“正在读取3”

代码块没有执行完毕，下一次循环就把上一条msg给覆盖了。最后循环执行结束，页面加载，不就是msg === "正在读取3"了嘛。

改进方法

不要用同步的方式读取文件

import { readdir } from 'fs/promises';

Const dirArr = ["c:\\1","c:\\2","c:\\3",];

for (const dirName of dirArr) {
    this.msg=`正在读取${dirName}`;
    try {
        const files = await readdir(path);
        ...
    }
    catch (err) {
        console.error(err);
        }
    }
}