Vue之render方法

之所以会提这个方法起因是看elementUI时发现有不少组件都是使用了render方法，一时之间没看懂，调查以后是因为自己基础薄弱的缘故，特此记录一下：

下面使用elementUI中的Avatar组件说明一下

 render() {
    const { avatarClass, size } = this;
    const sizeStyle = typeof size === 'number' ? {
      height: `${size}px`,
      width: `${size}px`,
      lineHeight: `${size}px`
    } : {};
    return (
      <span class={ avatarClass } style={ sizeStyle }>
        {
          this.renderAvatar()
        }
      </span>
    );
  }

该组件没有template标签，只有Script内容。上面的代码通过覆盖render方法来创建模板，Vue官方说明链接在这儿，创建完成以后再将其对外开放：

import Avatar from './src/main';

/* istanbul ignore next */
Avatar.install = function(Vue) {
  Vue.component(Avatar.name, Avatar);
};

export default Avatar;

这样一个渲染函数实现的组件就完成了。