Teleport 功能和 @vitejs/plugin-vue-jsx 效果不一样

[tujianglin]

[zhiyuanzmj]

有具体代码吗

[tujianglin]

@zhiyuanzmj

fix 分支，仓库是 https://github.com/tujianglin/ui-docs

[tujianglin]

@zhiyuanzmj 我怀疑是 Teleport 生成的 dom，在getRootNode 方法的时候 不是同一个 根节点，导致没有一起删除

[zhiyuanzmj]

playground

因为 vue-jsx-compiler 是和 vue-compiler 一样的逻辑，需要用 openBlock(), createBlock(slots.default()) 包裹一下调用方法，才能正确收集到依赖。也可以用 normalizeVNode， 内置了这个逻辑

[tujianglin]

@zhiyuanzmj
vue： 3.6.0-beta.4
vue-jsx-vapor：3.1.16

vue 版本 beta.4 使用 slots 使用有报错， beta.3 是正常的。

[tujianglin]

还有一个问题，
vite@8.0.0-beta 版本构建 打包出来的 包文件内容 和 vite@7.3.1 不一致

vite@8.0.0-beta

vite@7.3.1

[zhiyuanzmj]

感谢，我把 @PURE 标记删了 41d6e8d， createComponent 是有副作用的.

[tujianglin]

Playground
@zhiyuanzmj 还有一个这个问题, slots 不同情况下使用 响应丢失

[zhiyuanzmj]

这个好像没有什么好办法，为了性能我是按照 vue-compiler 的逻辑来编译 jsx, 如果直接用函数调用 slots.default() 会失去响应时，需要先调用一个 openBlock (_openBlock(), _createBlock(slots.default))

[tujianglin]

但是会有一个情况，我需要遍历slots，对里面的每一项进行style或者class的变化，就目前无法正确遍历。

[zhiyuanzmj]

虽然不太优雅，你可以在 createBlock 里面去写这个逻辑

 const children = (_openBlock(), _createBlock(() => {
      const slot = slots.default()
      console.log(slot[0].props.style)
      return slot
    }))

[zhiyuanzmj]

或者封装到一个方法里，在jsx里调用

const children = () => {
      const slot = slots.default()
      console.log(slot[0].props.style)
      return slot
    }
 return <Sub>{children()}</Sub> // 正常响应

[tujianglin]

这是遍历的场景demo

[zhiyuanzmj]

还有一个办法，不知道你能接受不，在 Sub 里面直接使用 slot 标签 repl

如果可以的话，我会考虑给 defineSlots 的运行时也改成类似 slot 的编译代码。

[tujianglin]

但是修改 Sub 的 slot 引入方式又正常了