uni-app 安卓app环境下this.$nextTick回调不执行

uni-app 安卓app环境下this.$nextTick回调不执行

开发环境 版本号 项目创建方式
Windows win10企业版1903(18362.30) HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：联想拯救者y70(Lenovo L71091)

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```vue
<template>  
    <view>  
        <button size="mini" @click="fn1">按钮1</button>  
        <button size="mini" @click="fn2">按钮2</button>  

        <view v-for="(item, index) in list" :key="index">{{ item }}</view>  
        {{ num }}  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            list: ['aaa'],  
            num: 111  
        };  
    },  
    methods: {  
        fn1() {  
            console.log('fn1_start');  
            this.list = ['aaa'];  
            this.$nextTick(() => {  
                console.log('fn1_end');  
            });  
        },  
        fn2() {  
            console.log('fn2_start');  
            this.num = 111;  
            this.$nextTick(() => {  
                console.log('fn2_end');  
            });  
        }  
    }  
};  
</script>  

<style scoped lang="scss"></style>

操作步骤：

点击按钮1后fn1函数执行, 控制台只打印 fn1_start $nextTick里回调没有执行 fn1_end 未打印 在修改data里的数组类型数据时，当新数据与老数据一致时$nextTick回调不执行，原始类型数据是正常的

预期结果：

点击按钮1后fn1函数执行, 控制台打印 fn1_start 再执行 $nextTick 回调函数 fn1_end 打印出来

实际结果：

$nextTick里回调没有执行 fn1_end 未打印

bug描述：

安卓app环境下this.$nextTick回调不执行


更多关于uni-app 安卓app环境下this.$nextTick回调不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

HBuilderX 4.61.2025040322-alpha 已修复。

更多关于uni-app 安卓app环境下this.$nextTick回调不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢反馈，复现了此问题。
vue2+app 会出现此问题，遗漏了数据无变化时候执行回调的逻辑。下个 alpha 会修复此问题。

这是一个已知的uni-app在Android平台下的性能优化问题。当数据未实际变化时，$nextTick回调可能不会触发。

原因分析：

  1. uni-app在Android环境下对数组数据的变更检测有特殊处理
  2. 当新设置的数组值与旧值完全相同时，框架会跳过更新流程
  3. 由于更新流程被跳过，$nextTick回调也就不会执行

解决方案：

  1. 确保每次数组更新都返回新对象：
fn1() {
    console.log('fn1_start');
    this.list = [...this.list]; // 创建新数组
    this.$nextTick(() => {
        console.log('fn1_end');
    });
}
  1. 或者使用强制更新方法：
fn1() {
    console.log('fn1_start');
    this.$forceUpdate();
    this.$nextTick(() => {
        console.log('fn1_end');
    });
}
回到顶部