序言
纪录Vue开发设计过程中遇到的难题，接口测试及其当地表明都没问题，但是一发布就出问题，因此关于这个问题逐一排查，在这里纪录查找问题的流程及其方式，希望能够帮到大家。
错误报告：Uncaught TypeError: Cannot read properties of undefined(reading 'refs')
升级：我认为devlopment条件下报警示而production自然环境中间出错的处理方法不足友善
然后我给Vue说了一个issue,我希望你能做一些提升，实际问题看完全篇后不明白的话也可以去看这些issue
该项目都是基于naive-ui vite进行开发的
线汇报错信息及表明如下所示：
接口测试和本地表明如下所示：
如何查找难题？
debugger
1. 先了解问题出在哪儿，虽然这也是线上环境，但我们依然可以从出错信息内容中找到相对应的不正确文档。
-
开启不正确的其他信息开展文件查看，这儿一看都是装包后文档，根本就不知道是哪一个文档。
-
因此我们可以利用
sourcemap来重新打包，另附vite配置
export default defineConfig({
plugins: [vue(), vueJsx()],
build: {
// 打开sourcemap
sourcemap: true,
},
})
- 运用http-server开展当地装包，随后用浏览器上查询装包问题，毕竟是网上难题，因此运用库装包然后进行 debug。
这儿我看到了不正确的有关文件，只需沿着有关文件去找准问题就可以了。
2. 先利用现有的信息去谷歌搜索引擎，由于有些时候这种问题就有人碰到过去了，因此查找获得结果显示速度最快的问题解决方法
根据谷歌搜索引擎我们不难发现有许多条难题，这些相关问题都可点击看一看，是否存在符合解决方案。（好一点的回答有GitHub的issue和stackoverflow及其AdminJS里的回答）
我就直接点开上图中选中那条信息内容
依据难题结论去查取不正确的有关文件，假如是有关问题就马上处理，建议大家常用 vscode 的全局搜索方便，文档内得话常用 ctrl f检索
3. 假如在网上的回答也不能处理自己的问题，那就需要逐渐自身debug了
-
第一我依据不正确点开查询，看看是什么所引发的不正确
发觉要在
owner context上取refs时没法得到，换句话说owner是undefined了在往上看，发觉这是一个
production上面报的不正确，但其实当地也会报，因此能够变为当地debug了自然当地没法调节的现象，那就根据文件出错区域进行
debugger，随后重新打包调节。
4. 在本地生活服务中进行调节
能够看见的确有警告信息了，根据源代码就明白了为什么仅有production上也有问题，但是其他自然环境则不会有什么问题。
当然这也侧边说明了大家在开发过程中也要多加注意警示⚠️
发现Test文档，上边都是一些naive-ui的部件，而且还是某一条row所造成的，因此去查询相对应的row的数据以及columns数据信息的结构。
根据debugger发觉结构的cell数据库的ref是false
再往下开展 debugger, 发觉踏入到setRef里了，并把ref为false传到了。
到这里突然发现问题，就是因为这个 cell的 ref被编译成了false了。
5. 发现的问题之后开始解决困难，若是有简单算法设计知识就是更加好的，并没有都不关键，只需沿着调试线继续走下去就可解除一团乱线。
从上述我们了解patch是指2个vnode（种类也是非常重要的，它会让你不用有这么多的背景信息能够快速解），那我们就必须从vnode着手。
寻找形成vnode的 ref的区域。
// vnode.ts
function createBaseVNode(
type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
props: (Data & VNodeProps) | null = null,
children: unknown = null,
patchFlag = 0,
dynamicProps: string[] | null = null,
shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
isBlockNode = false,
needFullChildrenNormalization = false
) {
const vnode = {
__v_isVNode: true,
__v_skip: true,
type,
props,
key: props && normalizeKey(props),
// ref为false是由于props传到了false。。。
ref: props && normalizeRef(props),
scopeId: currentScopeId,
slotScopeIds: null,
children,
component: null,
suspense: null,
ssContent: null,
ssFallback: null,
dirs: null,
transition: null,
el: null,
anchor: null,
target: null,
targetAnchor: null,
staticCount: 0,
shapeFlag,
patchFlag,
dynamicProps,
dynamicChildren: null,
appContext: null,
ctx: currentRenderingInstance
} as VNode
// ...
}
因此返回Test的代码里边查验
const columns = [
// ....
{
title: 'Address',
key: 'address',
width: 100,
ellipsis: {
tooltip: true
}
},
{
title: 'Another Address',
key: 'anotherAddress',
width: 100,
render(row) {
// 当age超过40会传到false，于是便G了
const ellipsisProps = row.age < 40 && { tooltip: true }
// debugger;
return h(NEllipsis, ellipsisProps, () => row.anotherAddress)
}
}
]
汇总
通过此次debugger，确实有一些难题非常值得汇总
- 敲代码还是得仔细啊，如果可能多补下头脑，少犯一些低级的错误。
- 调节确实不会太难，打开
sourcemap加上debugger，一步一步调节，都能找到克服的线结。