- 当前 Bug 的表现(可附上截图)
wxml 使用 hidden="{{!array.length}}"
js 中对 array 进行差量更新,无法触发 hidden 变化,只能全量更新
< view class = "intro" > <!-- hidden 仅在全量设置时会切换状态,差量追加不会触发 hidden 变化 --> < view hidden = "{{!array.length}}" > show </ view > < view > array.length={{array.length}} </ view > < button bindtap = "clearArray" >清空数组</ button > < button bindtap = "addItem" >差量追加数组</ button > < button bindtap = "setArray" >全量设置数组</ button > < view wx:for = "{{array}}" > {{item}} </ view > </ view > |
const app = getApp() Page({ data: { array:[] }, addItem(){ const array = this .data.array this .setData({ [ 'array[' +array.length+ ']' ]:array.length }) }, setArray(){ this .setData({ array: [0,1,2,3,4,5] }) }, clearArray(){ this .setData({ array:[] }) } }) |
- 预期表现
当对 array 差量更新时,hidden="{{!array.length}}" 可以正常变化
- 复现路径
1.点击”差量追加数组“按钮,会向array 中追加一条数据,此时 hidden 属性判断未生效,仍是隐藏状态,应该是显示状态
2.点击”全量设置数组“按钮,会全量更新 array,此时 hidden 属性判断会生效,处于显示状态
3.点击”清空数组“按钮,会全量清除 array,,此时 hidden 属性判断会生效,处于显示状态,此时可以继续测试差量与全量的差异
- 提供一个最简复现 Demo
这个是目前算法实现上导致的问题,已反馈给相关开发,但短期内应该无法修复,不是很容易修复的问题。
<view v-if="isShow">Hello</view>
2.通过 :style 的方式也能达到一样的效果 -->
<view :style="isShow?'':'display:none;'">Hello!</view>