菜鳥讀element源碼二 el-row

開篇

原本想把el-row和el-col放在同一篇來寫，然鵝發現對於一個菜鳥來講，簡單的el-row（它不簡單）已經讓我學到不少。

內容

這是個人row.js文件

模仿代碼中均以el-test 替換el, 目的是爲了邊模仿邊測試和el組件的效果對比

export default {
  // 駝峯命名法
  name: 'ElTestRow',
  props: {
    gutter: Number,
    
    // 渲染的標籤類型
    tag: {
      type: String,
      default: 'div'
    },

    //是否使用flex佈局
    type: String,

    justify: {
      type: String,
      default: 'start'
    },

    align: {
      type: String,
      default: 'top'
    }
  },

  render(h) {
    let classStyle = []
    let style = {}
    //爲何在設置gutter的時候  父組件要設置margin？  是爲了保證col第一個和最後一個仍然貼緊row的左側和右側  可是這樣作會撐開el-row
    if (this.gutter) {
      style.marginLeft = `-${this.gutter/2}px`
      style.marginRight = style.marginLeft
    }

    classStyle = [
      'el-test-row',
      this.justify !== 'start' ? `is-justify-content-${this.justify}` : '',
      this.align !== 'top' ? `is-align-items-${this.align}` : '',
      {'el-test-row-flex': this.type === 'flex'}
    ]

    return h(this.tag,{
      class: classStyle,
      style
    }, this.$slots.default)
  },
}
複製代碼

用render函數形式建立插件el-row。在VUE官網上有說Vue 推薦在絕大多數狀況下使用模板來建立你的 HTML。然而在一些場景中，你真的須要 JavaScript 的徹底編程的能力。這時你能夠用渲染函數，它比模板更接近編譯器。 。簡單來講我感受就是render有更快的編譯渲染速度？（感受是這個描述）。另外，感受render在某些時候相對於template更加靈活一點，你能夠想一下若是用template row組件該怎麼寫。

關於render函數該如何使用，我以爲看官網就夠了cn.vuejs.org/v2/guide/re…。不要怕，寫就完了！ 在仿製過程當中產生了疑問，在element的row.js中 是使用計算屬性監控gutter

computed: {
    style() {
      const ret = {};

      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }
      
      return ret;
    }
  },
複製代碼

**疑問一：爲何要使用計算屬性來改變style?(已解決於2019年7月10日，見文章尾)

在個人row文件中，我並無使用計算屬性判斷gutter的改變，可是在測試過程當中，改變gutter，視圖同樣會發生變化，因此我不是太理解爲何要使用computed

總結

學到了兩個方面的內容

• 一、仿製的過程當中我也仿製了樣式，由於element的樣式也是值得我深刻學習的 因此記錄了class的部分連寫規則

兩個class連寫   
  class1>class2    兩個class之間有>號 表明選擇父級爲class1的全部class2
  class1  class2   兩個class 之間有空格 表明class1內部的全部class2 class2出如今class1的子級元素纔會有效果
  class1class2     兩個class之間無空格  表明兩個class出如今同一個元素上 class2纔會有效果
  class1,class2    兩個class之間有逗號  表明選擇全部的class1，class2
複製代碼

• 二、由於在el-col存在float屬性，所以會存在難以撐起父組件的問題，經過查閱資料，有多種改變方法，我選擇了添加僞類

.el-test-row:after{
  content: '';
  clear: both;
  display: block;
}
複製代碼

同時我就看到element的row.css在class先後都添加了僞類

.el-row::after,
.el-row::before {
  display: table;
  content: "";
}
複製代碼

疑問2 爲何先後都要加僞類，不是很懂（我以爲加一個就夠了😂）

提出一點我以爲須要優化的地方

在使用gutter的時候，element會在class el-row先後分別添加margin-left margin-right，以確保位於最左和最右的el-col是和el-row無間隔（目前我認爲是這樣）可是這樣會撐開el-row的邊框，所以在我覺得，gutter可能須要一些優化，保證gutter不會撐開el-row的寬度。

疑問一答案

render函數在每一次有變量改變的時候都會觸發，gutter的改變會觸發style的改變，render也會跟着再次執行，可是若是按照我原來的寫法把gutter改變致使樣式改變寫到render裏面，那麼在每一次render執行的時候都會去從新計算style，這是很沒有必要的，好比說咱們改變的是type、jutify這時候咱們並不須要從新計算style，這時候style的值直接取緩存裏面的就成，減小了重複計算style，優化了性能。

PS：由大佬總結來的一句話就是 computed有緩存。一位不愛負責的大佬