Subscribe on changes!

内部函数traverseStaticChildren（n1, n2, shallow = false）存在数组越界

need more info
avatar
HostDay123
Apr 19th 2023

Vue version

3.2.13

Link to minimal reproduction

https://play.vuejs.org/#eNqlVG1v0zAQ/ivXIq3pXhIaBEIsnTRtRUNiA7FpCBGEMudSWzh2ZDsZpet/55xl6/oCX2ZFsu/9nscXz/vHVRU2Nfbf9RPLjKgcWHR1dZQqUVbaOJiDwQIWUBhdwoBcB6lKFdPKOijtFMbeHgzOUEoNX7WReW8wTFVRK+aEVuBM1qCxeOkyJ9gJFzI3qAI12gcV74PlGQXeUpoikxaHME8V0LovwPiILGoUsi7ucNUae2u8bhUFBMIeG5PNAsowhJ0dWMrx8LGIX4U2EEh0ICjXy0PaEl82lKimjpO8t7fi71cUgePCUlLQSs6AEQbMQRBajqArJ0rxhxRV5jhYDZkvTVnvuyQRN/JN68xkyiFFOQ03CI3SOdpVvw6254Ra/C5+dIAflofBPCeEctPqaWFxSIxX+F5mU9iBEUS7cPmgsOHk4+R8cnEFu5HnrEfe+Uxl5fLeNqh4kpjQMt4mTohJuLujXp4ox+MxvIp9wc8POhuefTv9cnw1+Tm5prKXVHdrgRb7Epc/SK3wQ3Gua+Is97dK+uEa4GVoiNIHjWjf4rPYDqnXzSZN87as/xhsRoPN4vVW1krQhb948/Z1DDTzmuaGoxGuHUWHvx1sufqOYzersGXyivy2cvU/sJtdbNRnuixRdS3sw03tjw4qmTHkWuaEGAIMpyE0B9TTLReMb2S91bXMgRM/9DgwFA1Nte8qr41QU7iRmv3yPwfja9x6lEFlNENrQ1RNePHplIbj4hp6hHlAlrxun5VB+1M/JeSka7ybW5TPYac70kZfEt2/jPQmkuCwJDIckgSQ8NHRfN6+g4tFEpHUaoWqiLfmoCQS5Tjtkz3tkymJHqP7i78vrI4J

Steps to reproduce

场景：根据一个描述了多个组件位置、属性的json数据，动态渲染出这些组件。 组件中使用到watch监听数据变化以及时改变显示样式，在watch中使用nextTick以防止通过ref设置组件style时找不到dom。 原来的根数据ref变量只在beforeCreate前（即setup）中赋值一次，该情况下一直没有异常。 后来将该变量变为可点击选择后再赋值为对应的数据时，并且根数据中包含的组件有使用到watch监听和nextTick时会出现异常。 异常点：在内部的function traverseStaticChildren(n1, n2, shallow = false)函数中，循环的i值超出ch2数组的长度，导致c2变量为undefined，最终导致访问c2.shapeFlag时异常。 QQ截图20230419104015

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'shapeFlag') at traverseStaticChildren (runtime-core.esm-bundler.js:6312:1) at traverseStaticChildren (runtime-core.esm-bundler.js:6317:1) at processFragment (runtime-core.esm-bundler.js:5471:1) at patch (runtime-core.esm-bundler.js:5094:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:1) at ReactiveEffect.run (reactivity.esm-bundler.js:187:1) at instance.update (runtime-core.esm-bundler.js:5745:1) at callWithErrorHandling (runtime-core.esm-bundler.js:157:1) at flushJobs (runtime-core.esm-bundler.js:390:1)

What is expected?

期望修复该问题，或告知是否我使用有问题

What is actually happening?

发生了浏览器控制台报异常

System Info

No response

Any additional comments?

No response

1
1
avatar
edison1105
Apr 19th 2023

Could you provide a runnable minimal reproduction?

avatar
HostDay123
Apr 19th 2023

项目中关联较多，不方便提供可运行的最小代码。

经过版本回退找到原因如下：

这是可以正常运行的

<template>
  <el-container >
    <el-header >
      <!--调用renderer()函数使用vue的h()函数动态渲染dom节点数据-->
      <component :is="renderer()" v-show="false"></component>

    </el-header>
    <el-container>
    
      <el-aside></el-aside>
   
      <el-main>
        <MainView ></MainView>
      </el-main>
  
      <el-aside ></el-aside>
    </el-container>
  </el-container>
</template>

这是运行会出现异常的，即component组件的位置更靠后了

<template>
  <el-container >
    <el-header >
    </el-header>
    <el-container>
    
      <el-aside></el-aside>
   
      <el-main>
        <MainView ></MainView>
      </el-main>
  
      <el-aside ></el-aside>
    </el-container>
  </el-container>
<!--调用renderer()函数使用vue的h()函数动态渲染dom节点数据-->
      <component :is="renderer()" v-show="false"></component>
</template>
avatar
edison1105
Apr 19th 2023

We can't analyze the issue without a runnable reproduction

avatar
littleBoBoy
Nov 29th 2023

same problem

avatar
yyx990803
Jan 18th 2024

Closing as no valid reproduction has been provided.

GitHub Track