今天使用vue在開發(fā)的時候遇到一個問題   具體可以看 https://segmentfault.com/q/1010000010041611

看了別人的回答，感覺收獲很大，所以來寫一下自己的理解。

從數(shù)據(jù)結(jié)構(gòu)、后臺減壓、<template>這幾點來說

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

 

列表已經(jīng)通過table做出來了，需要的進一步功能是在“查看詳情”的點擊事件中請求回該條數(shù)據(jù)的詳細情況，且一次只顯示一條反饋的詳情，把數(shù)據(jù)放在data中的一個currentMsg對象中（只存放當前請求回來的數(shù)據(jù)），然后在該行追加一個tr并將相應(yīng)的內(nèi)容填充進去，

當時困惑的是如何能夠以vue數(shù)據(jù)驅(qū)動視圖的方式追加詳情行，因為如果用js操作dom來做的話肯定沒問題，但是在vue里面這樣做就很low了，過不了自己這關(guān)，然后就在sf上面提了這個問題，看了boxsnake的回答之后有一種茅塞頓開的感覺，

數(shù)據(jù)結(jié)構(gòu)

這個可以說是通用的了，不僅僅是針對前端，因為一個良好的結(jié)構(gòu)化數(shù)據(jù)可以很好的優(yōu)化程序的結(jié)構(gòu)，讓別人更容易理解，

就這個歷史反饋功能來說，后端給了我2個請求的接口，一個是根據(jù)當前用戶獲取該用戶提交的所有反饋（allTitleInfo）的摘要信息，結(jié)構(gòu)如下：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

我也是按照這樣的結(jié)構(gòu)把數(shù)據(jù)填充到頁面中的，另一個接口就是根據(jù)ID獲取反饋的詳情，

當時想的是增加一個變量currentInfo，點擊查看詳情請求數(shù)據(jù)之后把當前數(shù)據(jù)覆蓋到currentInfo，然后在頁面中渲染出來。  后來想了想：每次都要重新重新請求，不管是否請求過該條數(shù)據(jù)。

后臺減壓

對于用戶反饋來說，這可以算是一個錯誤的算法，因為首先用戶反饋的信息總量不大，完全可以在allTitleInfo中新增一個detail對象，請求之后就把該數(shù)據(jù)添加到其中，這樣就通過判斷當前反饋中是否存在減少了后續(xù)的請求。

并且，這樣以id作為一組存放數(shù)據(jù)后，比單獨增加一個currentInfo查找想要的數(shù)據(jù)更快，比如說原來的復(fù)雜度是O(1) + O(1)，現(xiàn)在就變成了O(1)。

來看下優(yōu)化后的allTitleInfo：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

 

<template>

現(xiàn)在來說說vue里面的template，這個標簽就類似我在 VUE2.0+VUE-Router做一個圖片上傳預(yù)覽的組件 中提到的router-link一樣，并沒有實際的html意義（類似于一個意念盒子，反之div、section等是實體盒子）

圖1渲染出來的方式是通過在tr中v-for遍歷，類似下圖：

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

既然已經(jīng)把detail添加到里面了，肯定要在頁面中把他體現(xiàn)出來（使用v-if達到不渲染占位的目的）

接下來來看用template如何做：

 photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

 v-if通過判斷item.detail是否為空來決定渲染新增的tr，v-show通過判斷currentIndex是否等于當前的index是否展示該tr，至于currentIndex的改變就可以放在“查看詳情”的單擊事件中了。

至此，這個功能算是完成了，放一張項目里面的效果圖

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

分類: JavaScript

標簽: VUE, 前端, 數(shù)據(jù)結(jié)構(gòu), template

http://www.cnblogs.com/lonhon/p/7119042.html