H5 v-if 报错

[collincheng]

相关平台

H5

复现仓库

https://gitee.com/zhenglinhai/taro-demo.git
浏览器版本: Chrome 98.0.4758.109
使用框架: Vue 3

复现步骤

这个仓库写了一个简单的demo 跑 dev:h5就行

期望结果

不报错

实际结果

报错了

环境信息

Taro CLI 3.4.2 environment info:
    System:
      OS: macOS 12.2.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
      Yarn: 1.22.15 - ~/.yarn/bin/yarn
      npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    npmPackages:
      @tarojs/components: 3.4.2 => 3.4.2 
      @tarojs/mini-runner: 3.4.2 => 3.4.2 
      @tarojs/runtime: 3.4.2 => 3.4.2 
      @tarojs/taro: 3.4.2 => 3.4.2 
      @tarojs/webpack-runner: 3.4.2 => 3.4.2 
      babel-preset-taro: 3.4.2 => 3.4.2 
      eslint-config-taro: 3.4.2 => 3.4.2 

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• taro init rn 新项目安卓启动红屏报错
• 3.4.2 uploadFile 中的 progress 方法使用时报错
• Taro3.4.2 Vue2 H5 input 输入框 v-model 和 value无法初始化

Thank you so much!

[collincheng]

v-if 插入节点失败

[xinpingwang]

临时规避方式

将 template 内最外层的 view 修改为 div 标签：

<template>
  <div class="index">
    <view v-if="id === 1">
      <text>{{ msg }}</text>
    </view>
    <!-- H5中插入节点报错了 -->
    <view v-if="id === 2">
      <text>111</text>
    </view>
  </div>
</template>

问题原因分析

根据报错信息提示，insertBefore 指定的相对节点是一个 comment 节点，并且该节点已不存在于当前的 parent 节点内：

对比原代码和上述临时规避方式中的代码在 id 的值变化前渲染生成的 DOM，使用 view 标签时，没有 <!--v-if--> 节点

进一步分析 view 组件的代码，在组件完成渲染后会将节点内的 comment 节点移除，进一步证实了上述差异产生的原因：

taro/packages/taro-components/src/components/view/view.tsx

Lines 64 to 69 in 93493fa

	componentDidRender () {
	const el = this.el
	el.childNodes.forEach(item => {
	if (item.nodeType === document.COMMENT_NODE) el.removeChild(item)
	})
	}

通过分析该文件的提交记录，是由 #10510 修复 #10365 时引入的新问题

[dongj0316]

同样的问题

[Chen-jj]

看来不能处理 vue 的 comment 节点，我们回归测试一下。

[gezichenshan]

这个问题通过把v-if写成v-show 可以暂时解决。