【重要】Taro v3.6.22 版本 Vue2 中 block 组件 v-for 遍历后顺序错乱

ilmyapht  于 2个月前  发布在  其他
关注(0)|答案(6)|浏览(37)

相关平台

H5

浏览器版本: chrome 120
使用框架: Vue 2

复现步骤

1、创建 Vue2 的模版工程。
2、block 组件 v-for 遍历显示异常。

// data() {
  //   return {
  //     dataList: [1, 2, 3, 4, 5, 6, 7]
  //   }
  // },

<view>
      <block v-for="item in dataList" :key="item">
        {{ item }}
      </block>
    </view>

注:vue-fragment 组件执行完成后正常显示,但最后好像被框架 diff 计算后刷新成了倒序

期望结果

block 组件 v-for 遍历显示正常

实际结果

block 组件 v-for 遍历显示异常,顺序颠倒。

环境信息

👽 Taro v3.6.22

  Taro CLI 3.6.22 environment info:
    System:
      OS: macOS 14.2.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.22 => 3.6.22 
      @tarojs/components: 3.6.22 => 3.6.22 
      @tarojs/helper: 3.6.22 => 3.6.22 
      @tarojs/plugin-framework-vue2: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-alipay: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-h5: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-jd: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-qq: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-swan: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-tt: 3.6.22 => 3.6.22 
      @tarojs/plugin-platform-weapp: 3.6.22 => 3.6.22 
      @tarojs/runtime: 3.6.22 => 3.6.22 
      @tarojs/shared: 3.6.22 => 3.6.22 
      @tarojs/taro: 3.6.22 => 3.6.22 
      @tarojs/taro-loader: 3.6.22 => 3.6.22 
      @tarojs/webpack5-runner: 3.6.22 => 3.6.22 
      babel-preset-taro: 3.6.22 => 3.6.22 
      eslint-config-taro: 3.6.22 => 3.6.22
fdbelqdn

fdbelqdn1#

该问题应该与 vue 和 stencil 的注视节点冲突相关联,具体需进一步定位

k75qkfdt

k75qkfdt2#

另外,考虑到 vue2 已经过了维护期,Taro 将考虑在 4.x 版本移除对于 vue2 的支持避免过高的维护成本

vwhgwdsa

vwhgwdsa3#

另外,考虑到 vue2 已经过了维护期,Taro 将考虑在 4.x 版本移除对于 vue2 的支持避免过高的维护成本

支持,webpack4 是不是也可以移除?

xesrikrc

xesrikrc4#

支持,webpack4 是不是也可以移除?

考虑中,可以关注明天的直播~

6qqygrtg

6qqygrtg5#

该问题应该与 vue 和 stencil 的注视节点冲突相关联,具体需进一步定位

应该是冲突了, vue-fragment 这个库修改了 insertBefore 这些dom操作方法的原型 ,虽然dom树看不到了 fragment标签 ,但是是加了注释节点来定位的, 而stencil 也加了一些空的text节点来定位,可能是 stencil 加的 text 节点影响了

我的建议是不用 vue-fragment 这个库,并且从 taro 组件里面删掉 block, 因为即使是在小程序里面, block 也不是作为组件来使用的, 可以认为 block 是小程序原生写法专属的,taro可以在源码内部使用,而作为 taro使用者,用 react 或者 vue 写法应该都 不可用或者用不到 block

#13050

ss2ws0br

ss2ws0br6#

我的建议是不用 vue-fragment 这个库,并且从 taro 组件里面删掉 block, 因为即使是在小程序里面, block 也不是作为组件来使用的, 可以认为 block 是小程序原生写法专属的,taro可以在源码内部使用,而作为 taro使用者,用 react 或者 vue 写法应该都 不可用或者用不到 block

在实际项目中使用 block 还是比较常见的情况,虽然各个框架都有自己提供的方案,但支持 block 写法对齐小程序端特性,一定程度上可以减少开发者跨端场景下对于多端写法的关注。

在这里应当是仅在 vue2 可见的问题,或许目前可以为对应组件包裹一层提示避免开发者错误使用,或者尽快迁移到 vue3 上来。

相关问题