随着移动应用开发的不断发展，很多开发者也在不断探索新的技术方案，其中uniapp无疑是目前比较受欢迎的一种。虽然uniapp提供了很多便利，但是对于一些特定需求，开发者可能还需要一些额外的技巧。本文将介绍如何在uniapp中改变接收的数据。
一、背景
在uniapp中，我们可以通过wxs过滤器、computed计算属性等方式对数据进行一定程度的处理，但是如果我们需要对接口返回的原始数据进行更加精细的加工，这时候就需要使用$watch来实现数据的监听和响应。
二、具体操作
1.在vue实例中声明data对象，并定义需要响应的数据结构，比如接口返回的原始数据：
<script>
export default {
data () {
return {
rawData: {}
}
},
}
</script>
- 在生命周期函数created()中，通过uni.request发起请求，获取目标数据：
<script>
export default {
data () {
return {
rawData: {}
}
},
created() {
uni.request({
url: 'https://foobar.com/getData',
success: (res) => {
this.rawData = res.data
}
})
}
}
</script>
- 监听rawData对象，对数据进行加工，比如将接口返回的时间戳转换成可读性更好的时间格式：
<script>
export default {
data () {
return {
rawData: {}
}
},
created() {
uni.request({
url: 'https://foobar.com/getData',
success: (res) => {
this.rawData = res.data
}
})
},
watch: {
rawData: {
handler: function(val, oldVal) {
// 时间戳转换成可读性更好的时间格式
val.timestamp = new Date(val.timestamp).toLocaleDateString();
},
deep: true
}
}
}
</script>
三、总结
通过上述步骤，我们可以轻松实现对接口返回数据的自定义加工，并将加工后的数据通过页面渲染展示给用户。需要注意的是，$watch实际上是一个“听”的过程，所以在写$watch监听函数时，一定要注意变量名、缩进等规范格式的问题，以免发生意料之外的错误。
在使用uniapp开发过程中，遇到问题时，我们要学会利用官方文档，寻找帮助。同时，也要勤于探索、尝试新技术，用最短的时间、最少的代码，实现最大的收益。
