调试与排错（按层定位）

复杂问题最怕一上来就乱猜。 更高效的方式是先判断：问题到底出现在哪一层。

在 weapp-vite + Vue SFC + Wevu 体系里，你可以先把问题拆成 4 层：

1. 小程序宿主层
2. 构建与产物层
3. SFC 编译层
4. Wevu 运行时层

第 0 步：先给现象分类

你先不要着急改代码，先判断它属于哪一类：

• 页面白屏
• 组件不显示
• 数据变了但页面不更新
• 样式错乱
• 开发环境正常，构建后异常

只要这一步分清了，后面排查速度会快很多。

第 1 层：先看宿主和开发者工具

优先检查：

• 控制台错误
• Network 面板
• 当前页面路由
• 授权与缓存状态

很多“框架问题”，最后其实是：

• 页面路径写错
• 域名没配白名单
• 本地缓存脏了
• 组件路径声明不对

第 2 层：再看构建产物

如果问题和页面输出有关，直接看 dist 是最快的。

重点看：

• 页面 json
• 页面 wxml
• 页面 js
• 最终 app.json

例如“页面标题没生效”，就先看最终产物：

dist/pages/order-detail/index.json

而不是只盯着源码。

第 3 层：SFC 编译问题怎么查

如果你怀疑问题在 .vue 编译链上，优先排查这些：

• 模板语法是否符合小程序边界
• usingComponents 是否正确生成
• 页面 JSON 是否合并正确
• 事件和 v-model 写法是否合理

一个典型例子是：页面能出来，但组件不渲染。

这时优先看：

• 是否真的导入了组件
• 最终 json 里有没有对应组件声明
• 组件路径是否正确

第 4 层：Wevu 运行时问题怎么查

如果现象是“状态改了但页面不更新”，先问自己两个问题：

1. 响应式 API 是不是从 wevu 导入的

import { ref } from 'wevu'

2. hooks 是不是在同步 setup 阶段注册的

onLoad(() => {
  // ...
})

如果 hook 注册时机不对，行为就可能和预期不一致。

一个很实用的最小复现思路

无论问题多复杂，都建议尝试压缩成下面这种最小页：

<script setup lang="ts">
import { ref } from 'wevu'

const count = ref(0)
</script>

<template>
  <view>
    <text>{{ count }}</text>
    <button @tap="count += 1">
      add
    </button>
  </view>
</template>

如果最小页没问题，就说明问题通常不在基础链路，而在：

• 业务逻辑
• 组件组合
• 请求时序
• 状态组织

一个排错顺序模板

你可以直接套用：

1. 先复现问题
2. 记录出现问题的页面和路径
3. 看控制台/网络/开发者工具
4. 看 dist 产物
5. 去掉业务依赖，缩成最小复现
6. 再判断是构建层、编译层还是运行时层

最常见的误判

误判 1：白屏一定是运行时问题

很多时候只是路由或页面产物没有生成。

误判 2：按钮没反应一定是事件系统坏了

更常见的是模板没渲染、方法名拼错或宿主报错中断。

误判 3：数据不更新就是 Wevu 的问题

也可能是：

• 不是从 wevu 导入
• 页面根本没消费这个状态
• 你看的是旧缓存页面

一句话总结

排错时不要问“哪个框架有 bug”，而要先问：

这个问题更像是宿主问题、产物问题、编译问题，还是运行时问题？

接下来你可以继续看：

• 构建、预览与上传
• 参考入口与速查索引