- 发布:2024-07-25 09:55
- 更新:2024-07-25 11:09
- 阅读:183
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows11
HBuilderX类型: 正式
HBuilderX版本号: 4.24
手机系统: 全部
手机厂商: 模拟器
手机机型: 3.0.025(Beta1)
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
操作步骤:
创建页面并渲染一个列表,模拟请求数据
<template>
<view style="text-align: center;" v-for="(value, key) in listData" :key="key">
<text>{{ value }}</text>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
listData: ['a', 'b', 'c']
};
},
mounted() {
this.listData = ['a', 'b', 'c'];
setTimeout(() => {
this.listData.push(...['d', 'e', 'f']);
}, 2000);
}
};
// vue3响应式写法不支持呢
// import { ref, onMounted } from 'vue';
// const listData = ref();
// onMounted(() => {
// listData.value = ['a', 'b', 'c'];
// setTimeout(() => {
// listData.value.push(...['d', 'e', 'f']);
// }, 2000);
// });
</script>
<style></style>
创建页面并渲染一个列表,模拟请求数据
<template>
<view style="text-align: center;" v-for="(value, key) in listData" :key="key">
<text>{{ value }}</text>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
listData: ['a', 'b', 'c']
};
},
mounted() {
this.listData = ['a', 'b', 'c'];
setTimeout(() => {
this.listData.push(...['d', 'e', 'f']);
}, 2000);
}
};
// vue3响应式写法不支持呢
// import { ref, onMounted } from 'vue';
// const listData = ref();
// onMounted(() => {
// listData.value = ['a', 'b', 'c'];
// setTimeout(() => {
// listData.value.push(...['d', 'e', 'f']);
// }, 2000);
// });
</script>
<style></style>
预期结果:
预期可以将新增的数据渲染
预期可以将新增的数据渲染
实际结果:
新增数据没有渲染
新增数据没有渲染
bug描述:
进入列表页请求10条数据可以渲染出来,但是上滑加载更多的数据发现接口请求了,数据也得到了,但是页面不更新渲染。这一不更新渲染的问题仅在harmony模拟器内发现了,(没有harmony实体机,所以使用的模拟器)在H5、Android13(HyperOS1.0.1.0)均正常更新渲染。
上滑加载得到的数据 list.data 是通过.push方法追加的,正常来说会触发VUE的响应式系统,但是在harmonyOS模拟器内却没有触发,所以提交一下这个问题
Smart900zhang (作者) - 一名前端
经过不懈的问题终于把业务问题解决了。场景:列表在组件A,内置在组件B的slot内。在组件A内使用强制更新发现没有效果,然后想到了在组件B内使用强制更新,发现有效果。
Smart900zhang (作者)
强制更新有用
2024-07-25 10:14