Sunflower實時監測系統是一款運用Vue技術編寫的監測系統，其中最重要的一項功能是實時監測并展示傳感器采集到的數據。數據采集完成后，需要將其存儲為json格式并通過Vue處理。這篇文章將詳細介紹如何使用Vue將json對象組裝成可用于展示的數據。

在Vue中，可以使用data屬性來定義需要用到的數據。例如，在Sunflower系統中，需要用到的數據是從后臺傳輸過來的json對象。我們可以在Vue的data屬性中定義如下：

data:{
sensorData:{}
}

以上代碼定義了一個空的sensorData對象，用來存儲從后臺獲取的json數據。接下來需要將從后臺獲取到的數據填充進去。

為了完成這個任務，需要使用Vue的生命周期函數created。在這個函數中，將調用從后臺獲取數據的方法，并通過this.sensorData賦值：

created(){
axios.get('url').then((response)=>{
this.sensorData=response.data
})
}

這里使用了axios來進行http請求。當請求成功后，將從response中獲取data，并將其賦值給sensorData。現在sensorData中保存了需要用來展示的數據，但由于數據中可能會有多個字段，需要將其過濾并重新組裝。這里需要用到Vue的計算屬性。

計算屬性可以被認為是一種函數，在數據變動時可以被執行并返回新的值。在Sunflower系統中，需要將json對象中的數據過濾，只保留需要用來展示的字段（例如，時間和數值）。同時，需要將這些數據特定的格式進行重新組裝，以便在Vue組件中正確展示。

以下是一個計算屬性用例：

computed:{
filteredData(){
let data=[]
for(let key in this.sensorData){
let item=this.sensorData[key]
let time=moment(item['time']).format('hh:mm:ss')
let value=item['value']
data.push({
time:time,
value:value
})
}
return data
}
}

該代碼定義了一個名為filteredData的計算屬性。代碼中使用了moment.js庫來處理時間格式，將時間格式化為hh:mm:ss。數據將被循環獲取并組裝為一個新的數組，保留了time和value字段，并將時間進行了格式化。這樣，就將原始的json對象轉換成了用于組件展示的數據。

VUE的計算屬性和生命周期函數是Vue十分強大的兩個特性，可以將處理數據的邏輯全部放在Vue內部處理。作為Vue開發者必須熟練掌握。