uniapp setdata is not easy to use

As an open source cross-end framework, uniapp allows developers to easily develop applications for different platforms such as mini programs, H5, and APP using vue syntax. During the development process, we often need to use the setData method to update the data in the component. However, many developers reported that they encountered many problems when using setData, which aroused everyone's doubts about uniapp.

1. SetData in uniapp

First, let’s learn how to use setData in uniapp. setData is a way to update data in the vue component through this.setData. It has two parameters: the first parameter is the data that needs to be updated, and the second parameter is a callback function. For example:

this.setData({
  count: this.data.count + 1
}, function(){
  console.log('数据更新成功')
})

In the above code, we updated the count data in data through setData, and after the update was completed, a callback function was called.

2. The problem of setData in uniapp being difficult to use

However, in actual development, many developers reported that they encountered a series of problems when using setData in uniapp. In my personal development experience, the following are some of the problems I encountered:

1. setData has greater limitations

When the data we need to update is more complex , the use of setData is more troublesome. We need to write a lot of code in the first parameter of setData, and the updated data is relatively deep and needs to be written clearly layer by layer. This will lead to lengthy code and poor readability.

2. setData is not flexible enough

If the data we need to update contains multiple layers of nested objects, then the use of setData will become more difficult. We need to manually add if...else statements in the code to determine whether each attribute exists, and we also need to manually update the value of each attribute. This operation sometimes feels very cumbersome and troublesome.

3. setData has performance issues

Due to the underlying mechanism of vue, the use of setData will cause the component to be re-rendered once, which will cause certain performance issues. If our component hierarchy is relatively deep, then each setData will cause the entire component to be rendered, which will make our application very slow.

3. How to solve the problem that setData in uniapp is not easy to use

Now that we have understood the problems with setData, how to solve it? Here are several solutions for your reference:

1. Use vuex for state management

In vue, we can use vuex for global state management, the same in uniapp You can use this tool. Through vuex, we can store commonly used data in applications in the global store, and then when we need to update the data, we only need to perform mutation operations. This can not only facilitate data management, but also avoid the problem of using setData.

2. Use computed properties

In vue, we can use computed properties to handle some complex operations and data updates. This method can also be used in uniapp. Through computed, we can perform multi-layer logic processing based on the existing data, and then return the processed results to the vue component. This can not only avoid the problem of processing data layer by layer in setData, but also reduce the number of application re-renders. .

3. Use secondary events to pass parameters

In uniapp, we can use onemit to trigger secondary events to pass parameters. For specific usage, please refer to the following code:

On page A:

this.$emit('changeData',{data:'hello'})

On page B:

mounted(){
  uni.$on('changeData',(e)=>{
    console.log(e.data)//hello
  })
}

This method can avoid the performance problems caused by setData, but you need to pay attention. Event naming and parameter passing methods.

4. Conclusion

Although setData has some problems in uniapp, we can avoid and solve these problems through other methods. I suggest that during the development process, you should flexibly use the various tools and methods provided by uniapp based on specific scenarios and application needs to make development more efficient and smooth.

The above is the detailed content of uniapp setdata is not easy to use. For more information, please follow other related articles on the PHP Chinese website!