preload.js中 使用contextBridge.exposeInMainWorld 把数据传递给渲染进程，变更如何同步

通过contextBridge.exposeInMainWorld在preload.js中暴露的API是静态的，一旦页面加载完成后，如果主进程中的数据发生变更，这些变更不会自动同步到渲染进程。为了实现数据变更同步，你可以结合使用contextBridge与Electron的IPC机制来在主进程和渲染进程之间进行通信。
这里是一个如何实现数据同步的基本步骤：
第一步：在 preload.js 中暴露API
你首先需要在preload.js中使用contextBridge.exposeInMainWorld暴露一个能够接收数据更新的方法：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('api', {
  subscribeToData: (callback) => {
    ipcRenderer.on('data-update', (event, data) => {
      callback(data);
    });
  }
});

第二步：在主进程中发送数据更新
接着，你需要在你的主进程中使用webContents.send方法来向渲染进程发送数据更新的消息：

mainWindow.webContents.send('data-update', newData);

第三步：在渲染进程中监听数据更新
最后，在渲染进程中，你可以使用暴露的subscribeToData方法来设置数据更新的监听回调函数：

// 在渲染进程的某个JS文件中，可以是React组件中，Vue组件中，或者其他地方
window.api.subscribeToData((updatedData) => {
  console.log('数据更新了:', updatedData);
  // 根据需要更新UI或者状态
});

这样，每当主进程中的数据发生变更，并通过ipcRenderer发送data-update事件时，在渲染进程中设置的回调函数就会被触发，并接收到更新后的数据。这种方式可以将变更同步到渲染进程，使得数据保持一致。
请注意安全性！在向渲染进程暴露数据和方法时，一定要小心防范远程代码执行(RCE)风险。应确保只暴露必要的部分，并对发送给渲染进程的数据进行验证和清理。