uniapp setdata不好用-猿码集

1. 什么是uniapp setdata？

在uniapp开发中，setdata指的是一个可以改变数据的方法。它可以改变当前页面的data数据，根据新的数据重新渲染页面。因此，在uniapp开发中，setdata是非常重要的。

setdata方法的语法如下：


this.setData({
  key1: value1,
  key2: value2
})

相较于之前的uniapp版本，setdata方法的优势非常明显，主要表现在以下几个方面：

setData支持同时设置多个属性。这是他的一个重要的优势，为了避免一次性setData过多数据导致UI渲染卡顿，可以通过同时设置多个属性的方式，减少setData的次数，提高性能。

setData可以自动合并数据。合并多个setdata调用可以有效的减少setData次数。

setData可以处理需要异步修改数据的情况。

总之，setdata是uniapp开发中非常常用的一个方法，具有很多优势。

虽然setdata方法在uniapp开发中非常重要，但是开发者们在使用的时候却发现非常不好用，主要表现在以下几个方面：

调用setData之后，没有返回值，开发者无法获得该方法的执行情况。

setData不支持异步操作，对于大数据量或复杂数据结构的场景，效果会比较低下。

因为setData需要重渲染，所以如果其中一条属性已经被渲染成了元素结构，setData会把原先的结构全部替换掉，重新生成一套元素结构，这样可能会导致操作页面的体验变得非常不好。

综上所述，虽然setdata在uniapp开发中非常重要，但实际使用起来却不是特别理想，需要开发者不断的去优化使用。

对于复杂数据结构或者大数据量的场景，开发者可以试着将数据结构拆分成多个computed计算属性。computed计算属性是Vue.js的一个数据计算系统，可以监听数据的变化，依据指定的计算方法实时计算新的值，在自定义模板中动态获取展示。

因此，使用computed计算属性可以有效的减小setData的影响，大幅优化setData的性能问题。


computed: {
  filteredData: function () {
    return this.data.filter(function (item) {
      return item.value > 5
    })
  }
}

在这个例子中，我们定义了一个名为filteredData的computed计算属性，它会根据data数组打上过滤条件后的新数组进行计算。在UI层中，只需要通过{{filteredData}}语法引用计算属性即可，页面数据也会随着数组数据的变化实时更新。

将页面组件拆分成小的子组件可以有效的避免setData方法更新页面的卡顿现象。通过拆分页面组件，每个子组件只会在数据发生变化时进行局部的渲染匹配，避免了全局更新UI的问题。

另外，如果聚合组件是通过事件触发的，而不是主动更改数据，那么就可以使用父子组件之间传递数据的方式来实现组件数据的传递。

对于需要频繁使用的UI组件，开发者可以考虑将它们放在template模板中，这样就可以使用缓存技术，避免了反复渲染模板的问题，提高了UI渲染的效率。

本文主要讨论了uniapp开发中setdata方法的问题。尽管setdata方法在uniapp开发中非常重要，但开发者们在使用时也会发现比较不好用。我们提出了三个解决方案，希望对大家能有所启发。

使用computed计算属性

将页面组件拆分成小的子组件

使用template模板

setdata的问题不止这些，但是我们却需要借助这个方法完成页面数据的更新。因此，开发者需要拥有更深入的理解，才能更加有效的应对这些问题。