菜鸟读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有缓存。一位不爱负责的大佬