uni-app 微信小程序端插值表达式的值更新后没能渲染出来

示例代码：

<template>  
    <view>  
        <uni-icons class="passwdIc" fontFamily="CustomFont" size="30">{{code}}</uni-icons>  
        <button type="primary" @click="run1">改变数值</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            code: 'ue630'  
        }  
    },  
    methods: {  
        run1() {  
            if (this.code === 'ue630') this.code = 'ue6c3';  
            else this.code = 'ue630';  
            console.log(this.code);  
        }  
    }  
}  
</script>  

<style lang = "scss">  
    @font-face {  
        font-family: CustomFont;  
        src: url('/static/fonts/iconfont.ttf');  
    }  
</style>

操作步骤：

运行微信开发者工具。点击一次“改变数值”的按钮，观察按钮上面的字符串

预期结果：

ue6c3

实际结果：

ue630

bug描述：

在微信小程序端点击按钮，控制台显示插值表达式的值在变化，但是模拟器的页面却没有变化

bupafengyu 1楼•9 天前

我用相同的代码试了一下，是可以按照预期显示的，第一次点击按钮后显示ue6c3

yibo5220 2楼•9 天前

是在微信开发者工具里的模拟器里测试的吗，我在H5端测试也没问题

yibo5220 3楼•9 天前

回复 sunset3597: 是的呀

songsunli 4楼•9 天前

在 uni-app 中开发微信小程序时，如果发现插值表达式的值更新后没有正确渲染出来，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和解决：

1. 数据绑定问题

确保你正确地使用了 this.setData 方法来更新数据。在微信小程序中，直接修改 this.data 的值是不会触发视图更新的，必须通过 this.setData 方法来更新数据。

// 错误示例
this.data.message = 'Hello, World!';

// 正确示例
this.setData({
  message: 'Hello, World!'
});

2. 数据更新时机问题

确保你在正确的时机更新数据。例如，如果你在异步操作中更新数据，确保在异步操作完成后调用 this.setData。

setTimeout(() => {
  this.setData({
    message: 'Hello, World!'
  });
}, 1000);

3. 数据未正确初始化

确保你在 data 中正确初始化了数据。如果数据未初始化，可能会导致视图无法正确渲染。

data() {
  return {
    message: '' // 确保数据被正确初始化
  };
}

4. 视图未正确绑定

确保你在视图中正确绑定了数据。例如：

<view>{{ message }}</view>

5. 组件生命周期问题

如果你在组件的生命周期钩子中更新数据，确保你使用了正确的钩子。例如，onLoad、onShow 等。

onLoad() {
  this.setData({
    message: 'Hello, World!'
  });
}

6. 异步更新问题

如果你在异步操作中更新数据，确保你处理了异步操作的顺序和状态。例如，使用 Promise 或 async/await 来确保数据在异步操作完成后更新。

async fetchData() {
  const response = await someAsyncFunction();
  this.setData({
    message: response.data
  });
}

7. 视图更新延迟

在某些情况下，视图更新可能会有一定的延迟。你可以尝试在 this.setData 后调用 this.$forceUpdate() 来强制更新视图。

this.setData({
  message: 'Hello, World!'
}, () => {
  this.$forceUpdate();
});

8. 调试工具的使用

使用微信开发者工具的调试功能，检查 data 的值是否正确更新，以及视图是否正确渲染。你可以在控制台中打印 this.data 来检查数据是否被正确更新。

console.log(this.data);