Preface: micro-channel small programs often need to use this.setData ({}) Render the value of the variable to the view layer, that in the end what is this.setData, how to use? You need to pay attention to what? As a beginner, to share some of my experience, I hope you criticism.
Introduction: the setData function is mainly used to transmit data to view logical layer level, while the value corresponding to the change this.data.x.
Parameters: Object to key: value representation will change the value of the key corresponding to the value this.data.
Use: the first shows the code, wxss does not make sense not put up
index.wxml
1 <view class="numview">test01======={{test01}}</view> 2 <view class="numview">test02======={{test02}}</view> 3 <button bindtap="testfun">测试</button>
index.js
1 Page({ 2 data: { 3 test01: 1, 4 test02: 2 5 }, 6 testfun: function() { 7 var that = this; 8 if (this.data.test01 == 1) { 9 that.setData({ 10 test02:8 11 }) 12 console.log(this.data.test02) 13 } 14 }, 15 onLoad: function() {}, 16 })
After this time compiled simulator show:
Here it is easy to understand, when you click the button the button click event trigger execution testfun function, test02 set to 8, as shown:
By this.data.test02 = 8 in this way can you direct assignment, the answer is not , see the following:
Use the results this.data.test02 = 10 does not render to the front page display, but the background has changed, it will result in inconsistent data sets .
I can not think of a first assignment by this.data.test02 = 10, then through this.setData rendering it?
1 onLoad: function() { 2 this.data.test02 = 10; 3 this.setData({ 4 test02 5 }) 6 }
Compile error: Test02 IS not defined;
why? Then a test:
1 onLoad: function() { 2 this.data.test02 = 10; 3 var test03 = 20; 4 this.setData({ 5 test03 6 }) 7 console.log(this.data.test03) 8 }
After compiling display:
Found? Personally, I think it is this:
A, key this.setData set if the key is not only a value, from where to find this variable in the function, after rendering to the front desk to find the specified location.
(1) If the data Page object is not defined in the key, the setData created automatically, this can be found from the printed result (this.data.test03, data not defined).
(2) if the data object has been Page this variable is defined, the value of the variable data Central Review.
Two, key this.setData key set if there is value, rendering directly to the front and modify the data in the original data.
Precautions:
The above presentation instructions for use precautions it can be considered, a thorough understanding in order to use it freely, to avoid data confusion.
Also given the official setData suggestions: https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
Common setData operation error
1. frequently go setData
In some cases we have analyzed the years, the small program will very frequently (milliseconds) to go setData, which led to two things:
will feel when the user slides under Android Caton, operational feedback delay serious, because JS thread has been compiled perform rendering, failed to user operation events to the logic layer, logic layer will not be able to operate in a timely manner, without delay passed to the view layer;
rendering there is a delay occurs, Since the WebView JS thread has been busy, the logical layer to increase the communication time-consuming page layer, has passed from the sending time of several hundred milliseconds view layer data message received, the results are not real-time rendering;
2. each setData have passed a number of new data
to achieve setData From the bottom of our data transmission is actually a evaluateJavascript script process, when the data is too large will increase the build script execution time, taking WebView JS thread,
3. state background pages setData
when the page into the background state (invisible to the user), should not continue to be setD ata, rendering the user state back page can not feel, and the other backstage state will seize setData page to the front page of execution.