WebviewViewProvider面板关掉就丢数据，因其实例不绑定UI生命周期，VSCode会在折叠、最小化等场景下自动销毁并重建视图，导致HTML重载、前端状态清空；必须手动用vscode.getState()读取和vscode.setState()写入可序列化数据来持久化状态。
WebviewViewProvider 创建的面板默认不持久化，必须手动调用 vscode.getState() 和 vscode.setState() 才能跨重启保留状态。
为什么 WebviewViewProvider 面板关掉就丢数据？
和 createWebviewPanel 不同，WebviewViewProvider 实例本身不绑定 UI 生命周期——它只负责“提供”视图，而 VSCode 会在侧边栏折叠、窗口最小化或资源紧张时自动销毁并重建 WebviewView。这意味着：
- HTML 字符串每次
resolveWebviewView被调用时都会重载，未保存的状态直接清空 - 前端 JS 的全局变量、DOM 状态、表单输入值全丢失
- 不显式调用
vscode.getState()，插件进程重启后连上次打开的是哪个 tab 都记不住
如何正确保存和恢复 UI 状态？
状态必须在两个关键时机同步：
- 在
resolveWebviewView中读取：用vscode.getState()获取上次保存的对象，注入 HTML 或通过postMessage推送进前端 - 在前端交互触发后写入：监听用户操作（如按钮点击、输入框失焦），调用
vscode.postMessage({ type: 'saveState', data: ... })，主进程收到后执行vscode.setState(data) - 注意：只能存可序列化的值（plain object / array / string / number / boolean），不能存函数、DOM 节点或
Date对象（会变成null）
常见踩坑点：localResourceRoots 和 asWebviewUri 仍需配置
很多人以为“用了 WebviewViewProvider 就不用管资源路径了”，其实完全相反——因为视图可能被反复创建，资源加载失败更容易暴露：
-
webview.localResourceRoots必须设为[vscode.Uri.joinPath(context.extensionUri, 'media')]，不能漏 - CSS/JS 的
<link href="...">和<script src="...">中的路径，必须经webview.asWebviewUri(...)转换，硬编码./style.css或media/style.css一定 404 - 如果 CSS 里有
@import url('theme.css')或字体url('font.woff')，这些子资源也得单独转换并传给前端拼进 HTML，VSCode 不递归解析
为什么不能依赖 webview.html 拼接时的初始状态？
因为 resolveWebviewView 可能被多次调用（比如侧边栏先折叠再展开），而 webview.html 是只读属性，每次赋值都会触发整个页面 reload：
- 前端 JS 初始化逻辑（如
acquireVsCodeApi()绑定、事件监听）会重复执行，导致消息监听器叠加、定时器失控 - 如果 HTML 字符串里内联了大量 JS 状态（如
const initialState = { count: 5 }），它不会自动更新，永远是第一次生成时的快照 - 真正可靠的状态载体只有
vscode.getState()返回的对象，其余都是临时快照
最易被忽略的一点：状态恢复不是“一劳永逸”。如果你在前端用 localStorage 存了中间态，又没在 vscode.setState() 里同步，VSCode 重启后 localStorage 还在但 vscode.getState() 已为空——两边就彻底脱节了。
