Hello小夥伴們，很久不見，你們五一過得怎麼樣呢~反正兔妞出去以日均2w步的運動量玩耍一圈回來已經要散架了，因此稍休息了幾天，今天就繼續咱們的Vue的專題吧。如標題，咱們今天的主題是渲染！node
列表渲染算法
不知道你們有沒有被數組的循環渲染折磨過呢，相信你們都寫過for(var i=0, i<data.length;i++){}之類的代碼吧，有的時候一層套一層，看着本身都要吐了，這時候就輪到咱們Vue的列表渲染上場了。數組
1）使用Vue進行列表渲染主要須要兩步。微信
首先，咱們要在data中定義數組：編輯器
有了數組，咱們就能夠對數組進行循環了，經過v-for咱們就能夠對列表進行循環了。這裏其實和咱們前面提到的ES6中的for循環很像，item in items的方法進行循環。是否是很簡單呢~flex
2）那麼有的小夥伴要問了，那萬一我要知道索引咋辦呢~彆着急，Vue是支持的呢！spa
這樣子就能夠了，可是順序不要寫反哦，必定要先寫循環體中的對象，而後纔是index！.net
3）告訴你們個小祕密，其實可以做爲列表循環的不僅是數組呢，對象也是能夠的：3d
必定要去試試哦~orm
4）細心的小夥伴們必定發現了，有的編輯器單寫一個v-for會有小浪線，雖然也能運行，可是這對於一個擁有強迫症的碼農來講是多麼的煎熬啊！咱們來看看是爲啥呢？
事實上，當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。可是有些的時候會出現問題，經過增長一個key就可以就可以識別節點身份啦，因此最好都帶上key呢~
那麼講道理key究竟是幹嗎的呢？它主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。從而避免有重複的key形成渲染失敗。因此咱們最好這樣寫呢：
條件渲染
1）說完了列表渲染，咱們如今要說說條件渲染了。想必我聰明的小夥伴們已經猜到了v-if是幹嗎的了，沒錯說白了就是有條件的渲染某一塊內容。類似於if的使用，v-if也是有v-if, v-else-if, v-else。那麼就讓咱們看一下究竟怎麼用呢？
有了這個作個tab也就輕鬆多了，綁定個事件，經過改變條件的值就能夠了，是否是呢~
2）不知道你們據說過v-show嗎，這個與v-if有着類似的功能，都可以控制元素是否可以顯示，那麼他們又有什麼區別呢。
他們的區別其實能夠類比一下display:none;和visibility: hidden;
首先，就渲染的層面來講，v-show是默認渲染全部內容的，只是控制CSS樣式讓元素不能顯示，有較大的初始渲染開銷，而v-if是真的按照條件去渲染對應的區塊，相對初始開銷比較小。因爲v-if每次條件改變都真的從新進行渲染，銷燬、重建條件塊中的事件監聽器和子組件，須要很大的開銷。而v-show，一直不進行從新渲染，因此有着較小的切換開銷。
好啦，今天的內容就到這裏啦，喜歡兔妞文章的小夥伴請關注並在看哦~~
本文分享自微信公衆號 - 萌兔it（mengtu_it）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。