由于微信小程序誕生于vue.js和react.js之后，所以他們?cè)诋?dāng)初設(shè)計(jì)代碼架構(gòu)的時(shí)候也是借鑒了vue.js和react.js的想法，也遵循的組件化的方式，延用了setData的機(jī)制去把視圖層和邏輯層做一個(gè)“中轉(zhuǎn)站”兩邊連接起來。但是這種機(jī)制一直存在性能上的問題，微信小程序也不例外。先看一張圖:

這張圖大體描述了一下setData的工作原理，當(dāng)程序開始觸發(fā)setData操作的時(shí)候，先把數(shù)據(jù)做成字符串形式傳遞，同時(shí)把轉(zhuǎn)換后的數(shù)據(jù)拼接成js腳本形式，接下來這個(gè)js腳本都被2邊提供的evaluateJavascript所實(shí)現(xiàn)，那為什么要分webview和javascriptCore去執(zhí)行呢？先說一下這2個(gè)是干嘛的

webview和JavascriptCore

        在微信打開小程序的時(shí)候，會(huì)先起了2個(gè)線程一個(gè)是view Thread，一個(gè)是AppService Thread， 通俗講前者是視圖層，后者是邏輯層。它們是獨(dú)立的，各自職能不一樣，但它們是并行操作的，小程序的頁(yè)面展示都是嵌套在webview里面的，

在小程序入口文件app.js里面有一個(gè)pages配置項(xiàng)，例如：

pages: [

     'pages/indexBar',

     'pages/friends/friends'

]

這里配置了多少個(gè)頁(yè)面，小程序都會(huì)預(yù)先加載多少個(gè)頁(yè)面對(duì)應(yīng)的webview,這是view Thread所做的操作，同時(shí)AppService Thread也是對(duì)應(yīng)的頁(yè)面做了邏輯層面的加載操作，會(huì)根據(jù)小程序的生命周期依次做邏輯操作，這里也會(huì)和view Thread有數(shù)據(jù)傳輸交互，下面一張圖可以很詳細(xì)的描述view Thread和AppService Thread同時(shí)加載一個(gè)頁(yè)面的所有過程

在架構(gòu)上，WebView 和 JavascriptCore 都是獨(dú)立的模塊,數(shù)據(jù)是不能直接共享的，為了讓數(shù)據(jù)共享，WebView和JavascriptCore都提供了evaluateJavascript來實(shí)現(xiàn)，（在安卓機(jī)上老早以前提供的不是evaluateJavascript來調(diào)用js操作的，到sdk19以上采用evaluateJavascript方法）

由于有了以上的機(jī)制，造成了setData存在一些性能上的問題，如果頻繁地調(diào)用，WebView和JavascriptCore執(zhí)行并發(fā)多了就會(huì)造成用戶體驗(yàn)卡頓的現(xiàn)象，為了減少性能開銷，建議盡量對(duì)setData進(jìn)行合并操作：

修改成：

this.setData({
     one: '1',
     two: '2',
     three: '3',
})

這樣就減少了拼接js腳本的次數(shù)，從而提升了性能。

在Taro小程序框架里面更新數(shù)據(jù)時(shí)調(diào)用的 setState 為異步方法，自動(dòng)對(duì)同一個(gè)事件循環(huán)多次setState調(diào)用，然后進(jìn)行合并處理，還會(huì)對(duì)數(shù)據(jù)進(jìn)行diff優(yōu)化，自動(dòng)剔除那些未改變的數(shù)據(jù)。