uniapp中v-show的bug

最新推荐文章于 2025-05-06 10:59:28 发布

py_boy

最新推荐文章于 2025-05-06 10:59:28 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp

本文链接：https://blog.youkuaiyun.com/py_boy/article/details/106696510

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了uni-app框架中数组更新的机制，特别是针对数组长度变化时，v-show和v-if指令的不同表现。通过具体示例展示了微信小程序环境下，数组的差量更新如何影响DOM元素的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

```javascript
<template>
    <view class="uni-container">
		<button @click="arrayInit">array添加项</button>
		<button @click="arrayEmpty">array变为空数组</button>
		<view>array.length > 0 的值 {{ array.length > 0 }}</view>
		<view v-show="array.length > 0">v-show中array.length大于0展示</view>
		<view v-if="array.length > 0">v-if中array.length大于0展示</view>
    </view>
</template>
<script>
    export default {
		data() {
			return{
				array: [],
				isShow: false
			}
		},
		methods: {
			arrayInit() {
				this.array = [1,2,3,4];
			},
			arrayEmpty() {
				this.array = [];
			}
		},
    }
</script>
```

点击"array添加项"按钮，会为array赋值为[1,2,3,4]

预期结果

“v-show中array.length大于0展示”内容展示出来
“v-if中array.length大于0展示”内容展示出来

实际结果

“v-show中array.length大于0展示”内容没有展示出来
“v-if中array.length大于0展示”内容展示出来

由上图可知，array的更改并没有触发v-show这块dom的更新

问了下uniapp的github上面的issus，uniapp中针对数组底层都是差量更新，而微信小程序中使用hidden="{{array.length}}"针对数组差量更新并不会动态更新，链接https://developers.weixin.qq.com/community/develop/doc/000c8ee47d87a0d5b6685a8cb57000