Skip to content

【BUGFIX】修复嵌套列表更新列表后组件实例复用导致动态属性丢失问题 #5507

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

nap-liu
Copy link

@nap-liu nap-liu commented Jun 5, 2025

我的疑问是既然这种情况下应该是直接彻底禁止使用动态属性,还是抹平差异让setup中可以通过props直接访问动态属性?

这个疑问的是因为setup中没有动态属性,但是框架在render的前置操作中又会把动态属性attrs中的数据合并到props中,但是该属性有没有在template中使用,则导致框架因为render函数没有使用该动态属性忽略该属性的变化,导致不会触发组件的render,这时列表发生变更,组件仅仅进行了数据层面的更新(该步骤只会复制声明的参数),ui没有更新(原始的vue框架中如果props检测变化则强制更新ui层,修复代码中的instance.effect.dirty = true是标记框架需要更新ui),则render的前置复制attrs到props的操作没生效,导致闭包数据错误

最小复现代码如下图所示

小程序代码片段
问题现象如下

Pasted Graphic 1

最小复现demo代码如下
Pasted Graphic

经过排查发现uni内置的vue框架中丢失如下代码

function updateComponentProps(up, instance) {
  const prevProps = toRaw(instance.props);
  const nextProps = findComponentPropsData(up) || {};
  if (hasPropsChanged(prevProps, nextProps)) {
    updateProps(instance, nextProps, prevProps);
    if (hasQueueJob(instance.update)) {
      invalidateJob(instance.update);
    }
    {
      // 下面这行的作用就是告诉effect去执行render更新,但是uni框架删除了这行代码,不知道什么原因
      instance.effect.dirty = true
      instance.update();
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant