uniapp：onPullDownRefresh方法中在计时器内不能实现数据绑定的问题（uniapp请求后 数据渲染不出来 或 不及时）

场景描述：模拟实现下拉刷新，在onPullDownRefresh中写了一个计时器，计时器内模拟实现异步访问，但是却不能更新绑定数据

问题解决参考网站：https://ask.dcloud.net.cn/question/65845

出错代码：

onPullDownRefresh() {
	setTimeout( function() {
		uni.stopPullDownRefresh(); // 1s之后触发（异步）
		this.lists = [ '柚子', '苹果', '西瓜', '水蜜桃', '香蕉' ]; // error: 没有渲染到页面
		// this.$forceUpdate(); // 无效
		console.log('加载完成，更新数据');
	}, 1000);
}

使用了强制刷新this.$forceUpdate();也不起作用

搜索之后，看到别人说将函数写成箭头函数就行了，于是试了试，成功
正确代码：

onPullDownRefresh() {
	setTimeout( ()=> {
		uni.stopPullDownRefresh(); // 1s之后触发（异步）
		this.lists = [ '柚子', '苹果', '西瓜', '水蜜桃', '香蕉' ]; // error: 没有渲染到页面
		console.log('加载完成，更新数据');
	}, 1000);
}

效果展示：

全部代码：

<template>
	<view>
		<view v-for="(item, index) in lists">
			<text :style="{'color': textColor}">{{item}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [ '篮球', '羽毛球', '乒乓球', '足球', '橄榄球' ],
				textColor: 'green'
			}
		},
		onLoad: function(options) {
			setTimeout(function() {
				uni.startPullDownRefresh(); // 1s之后触发（异步）
			}, 1000); // 页面加载1s之后开启下拉刷新
		},
		// onPullDownRefresh用来监听下拉刷新事件，在此方法中写触发下拉刷新需要完成的事务
		onPullDownRefresh() {
			setTimeout( ()=> {
				uni.stopPullDownRefresh(); // 1s之后触发（异步）
				this.lists = [ '柚子', '苹果', '西瓜', '水蜜桃', '香蕉' ];
				this.textColor = 'pink';
				console.log('加载完成，更新数据');
			}, 1000); // 下拉刷新持续显示1s
		}
	}
</script>

<style>
</style>