Vue中如何正确的使用jsx语法书写代码

一、首要了解vue的render函数？

我们得知道有些特定的场景下 我们是需要去用到render函数去渲染vue模板的，那么何种场景呢？
在这里我可以找两个例子

当然我们也可一看一下element的源码 package.json中是否存在这两个依赖

以下是官网采用的两个依赖（其实两者是一样的 只不过由于版本问题）

当然这两个依赖也同样是我们在vue中书写jsx必不可少的两个依赖

回到render函数上面来，首先我们要了解的是什么是render函数，那么我们必须要知道的是什么？什么是虚拟dom，那么什么是虚拟dom呢？

1、什么是虚拟dom？

其实这是一个屡见不鲜的面试题，用一句话来概括，用javascript的方式书写出来的dom节点就是虚拟dom，在vue中虚拟dom也就是我们所说的vnode等同于虚拟dom。

官网给出的我们使用render书写渲染函数，其实我们要理解的是什么？

因为vue是虚拟dom，所以在拿到template模板时也要转译成vnode的函数，而用render函数构建dom，vue就免去了转译的过程，我们在一些特定场景下去使用render书写起来性能方面能得到更进一步的提升。

看一下官网使用render函数书写虚拟dom

// template 模板写法
<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>
<script>
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>



// createElement 虚拟dom写法
<script>
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
</script>

这样看起来的话好像反而要比template模板写法来的更简洁些，但是如果数据量一旦多起来呢？我们不免要考虑的一个问题就是不如标签写法来的直观。

当然有了解react的同学就会说了 那react也同样是render函数进行渲染 而且里面写的是jsx模板标签，那么我们可不可以在vue的render里面书写jsx模板标签呢？

此时其实也就引出了我们今天的主题，如何在vue的render中去书写jsx标签。

2、如何在render中使用jsx语法进行书写？

我们来到 git地址

同样官网会给出我们解答

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

babel.config.js

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

其实就是像这样（因为我这边使用的是vueCli已经携带了babel所以已经有了这个文件）

那么其实这个时候，我们的jsx就已经安装好了，此时我们就可以愉快的在render中书写jsx来进行编码了。

这个时候我们也同样将git上面的几个案例搬运过来

3、写法示例

// 书写jsx模板（外层单个标签 不要retrun两个标签）
render() {
  return <p>hello</p>
}

// 具有动态属性
render() {
  return <p>hello { this.message }</p>
}

// 单闭合标签
render() {
  return <input />
}

// 引入组件
import MyComponent from './my-component'
export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

// 带有属性
render() {
  return <input type="email" />
}

// 带有动态属性（这里面的this指向的便是当前的vue实例）
render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

// 带有多个动态属性  object解构式写法
render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }
  return <input {...{ attrs: inputAttrs }} />
}

// 指令v-model
render() {
  return <input vModel={this.newTodoText} />
}

// 指令v-model 修饰符trim 去空格
render() {
  return <input vModel_trim={this.newTodoText} />
}

// 事件@click 
render() {
  return <input vOn:click={this.newTodoText} />
}

// 事件@click 移除冒泡以及默认行为
render() {
  return <input vOn:click_stop_prevent={this.newTodoText} />
}

// 指令v-html
render() {
  return <p domPropsInnerHTML={html} />
}

当然我们同样是可以使用想onClick = {this.xxx}这种方式去进行书写的。

二、案例编写

<!--
 * @Author: your name
 * @Date: 2021-04-29 11:29:18
 * @LastEditTime: 2021-04-29 15:23:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /hx/packages/tbTag/main.vue
-->
<script>
export default {
  name: "tbTag",

  render(h) {
    const data = {
      props: {
        ...this.$attrs,
      },
      on: {
        ...this.$listeners,
      },
    };

    // 使用jsx 模板插槽的话  用default[0]即可
    return (
      <div {...data} style={this.color ? `background-color:${this.color}` : ""} class={`tb-tag tag  ${this.tbType} ${this.tbSize} ${this.tbEffect}`}>
        {this.$slots.default[0]}{" "}
        <i
          vOn:click_stop={() => {
            this.$emit("close");
          }}
          class="iconfont icon-close-bold bold"
          style="margin-left:2px;"
        ></i>
      </div>
    );
  },
  data() {
    return {
      tbSize: "tag_small",
      tbType: "",
      tbEffect: "",
      isCloseble: "",
    };
  },
  props: {
    // 颜色
    type: {
      type: String,
      default: "primary",
    },
    // 大小
    size: {
      type: String,
      default: "small",
    },
    // 三种样式一种是  light也就是默认  发浅色  dark:实心   plain:镂空
    effect: {
      type: String,
      default: "light",
    },
    // 自定义背景颜色
    color: {
      type: String,
      default: "",
    },
    // 关闭标签
    closable: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.Ptype();
    this.Psize();
    this.Peffect();
    this.Pclosable();
  },
  methods: {
    // 页面加载判断当前标签是否存在关闭小图标
    Pclosable() {
      const vm = this;
      if (vm.closable) {
        vm.isCloseble = true;
      } else {
        vm.isCloseble = false;
      }
    },
    // 页面加载判断当前是何种样式
    Peffect() {
      const vm = this;
      if (vm.effect == "light") {
        vm.tbEffect = "tag_effect_light";
      } else if (vm.effect == "dark") {
        vm.tbEffect = "tag_effect_dark";
      } else if (vm.effect == "plain") {
        vm.tbEffect = "tag_effect_plain";
      }
    },
    // 页面加载判断当前按钮大小
    Psize() {
      const vm = this;
      if (vm.size == "mini") {
        vm.tbSize = "tag_mini";
      } else if (vm.size == "small") {
        vm.tbSize = "tag_small";
      } else if (vm.size == "medium") {
        vm.tbSize = "tag_medium";
      }
    },
    // 页面加载判断当前按钮类型
    Ptype() {
      const vm = this;
      if (vm.type == "primary") {
        vm.tbType = "tag_primary";
      } else if (vm.type == "success") {
        vm.tbType = "tag_success";
      } else if (vm.type == "info") {
        vm.tbType = "tag_info";
      } else if (vm.type == "warning") {
        vm.tbType = "tag_warning";
      } else if (vm.type == "danger") {
        vm.tbType = "tag_danger";
      }
    },
  },
};
</script>
<style scoped>
.bold {
  cursor: pointer;
}
.tag {
  margin: 0 2px;
  border-radius: 4px;
  background: #ffffff;
}
/* .tag:focus,
.tag:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
} */

/* size 样式 */
.tag_mini {
  height: 30px;
  font-size: 12px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 30px;
  text-align: center;
  padding: 0 16px;
  /* cursor: pointer; */
}
.tag_small {
  height: 35px;
  font-size: 14px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 35px;
  text-align: center;
  padding: 0 20px;
  /* cursor: pointer; */
}
.tag_medium {
  height: 40px;
  font-size: 16px;
  display: inline-block;
  border: 1px solid #eeeeee;
  line-height: 40px;
  text-align: center;
  padding: 0 24px;
  /* cursor: pointer; */
}
/* effect 按钮样式 */
.tag_primary {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}
.tag_success {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}
.tag_info {
  color: #909399;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}
.tag_warning {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}
.tag_danger {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
}

/* .tag_primary:focus,
.tag_primary:hover {
  color: #409eff;
  background-color: #ecf5ff;
  border-color: #d9ecff;
}

.tag_success:focus,
.tag_success:hover {
  color: #67c23a;
  background-color: #f0f9eb;
  border-color: #e1f3d8;
}

.tag_info:focus,
.tag_info:hover {
  color: #909399;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
}

.tag_warning:focus,
.tag_warning:hover {
  color: #e6a23c;
  background-color: #fdf6ec;
  border-color: #faecd8;
}

.tag_danger:focus,
.tag_danger:hover {
  color: #f56c6c;
  background-color: #fef0f0;
  border-color: #fde2e2;
} */

.tag_primary.tag_effect_dark {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
/* .tag_primary.tag_effect_dark:focus,
.tag_primary.tag_effect_dark:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
} */
.tag_success.tag_effect_dark {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
/* .tag_success.tag_effect_dark:focus,
.tag_success.tag_effect_dark:hover {
  background: #85ce61;
  border-color: #85ce61;
  color: #fff;
} */

.tag_info.tag_effect_dark {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
/* .tag_info.tag_effect_dark:focus,
.tag_info.tag_effect_dark:hover {
  background: #a6a9ad;
  border-color: #a6a9ad;
  color: #fff;
} */
.tag_warning.tag_effect_dark {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
/* .tag_warning.tag_effect_dark:focus,
.tag_warning.tag_effect_dark:hover {
  background: #ebb563;
  border-color: #ebb563;
  color: #fff;
} */
.tag_danger.tag_effect_dark {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
/* .tag_danger.tag_effect_dark:focus,
.tag_danger.tag_effect_dark:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
} */
.tag_primary.tag_effect_plain {
  color: #409eff;
  background: #ffffff;
  border-color: #b3d8ff;
}
/* .tag_primary.tag_effect_plain:focus,
.tag_primary.tag_effect_plain:hover {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
} */
.tag_success.tag_effect_plain {
  color: #67c23a;
  background: #ffffff;
  border-color: #c2e7b0;
}
/* .tag_success.tag_effect_plain:focus,
.tag_success.tag_effect_plain:hover {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
} */
.tag_info.tag_effect_plain {
  color: #909399;
  background: #ffffff;
  border-color: #d3d4d6;
}
/* .tag_info.tag_effect_plain:focus,
.tag_info.tag_effect_plain:hover {
  background: #909399;
  border-color: #909399;
  color: #fff;
} */
.tag_warning.tag_effect_plain {
  color: #e6a23c;
  background: #ffffff;
  border-color: #f5dab1;
}
/* .tag_warning.tag_effect_plain:focus,
.tag_warning.tag_effect_plain:hover {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
} */
.tag_danger.tag_effect_plain {
  color: #f56c6c;
  background: #ffffff;
  border-color: #fbc4c4;
}
/* .tag_danger.tag_effect_plain:focus,
.tag_danger.tag_effect_plain:hover {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
} */
</style>

引入调用即可。