vue2基础- render 渲染函数基础使用

什么是渲染函数

我们知道Vue是一款流行的JavaScript前端框架。绝大多数情况下我们都是使用模板template来创建 HTML( 这也是Vue 的推荐写法)，然后Vue将模板中的代码进行编译，经过渲染函数转换成vnode树，也就是我们常说的虚拟DOM。

如下图所示：
图例来源：Vue-render函数的应用与原理浅析

从中我们可以看出，渲染函数 render比模板 template 更接近底层。所以有些情况下你可以直接使用渲染函数 render。

为什么需要渲染函数

• 喜欢JavaScript写组件的方式
• 追求性能
• 自定义组件
• 更多…

常见的是在被用来写自定义组件。

函数式组件

渲染函数顾名思义它就是个函数，而且它的作用就是生成vnode数，且实现方式更接近于底层，那么有些组件我们可能为了方便或者性能考虑，就可以直接使用渲染函数实现。

一个函数式组件就像这样：

Vue.component('my-component', {
  // 意味它无状态 (没有响应式数据) 也没有实例 (没有 this 上下文)
  functional: true,
  // Props 是可选的
  props: {
    // ...
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    // ...
  }
})

那么我们如何去使用渲染函数呢？

怎么使用渲染函数

我们定义render-function-demo.js函数式组件。

export default {
  name: "AnchoredHeading",
  render: function (createElement, context) {
    return createElement(
      "h" + this.level, // 标签名称
      this.$slots.default // 子节点数组
    );
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
};

然后在render-demo.vue中使用

<template>
  <div class="container">
    <AnchoredHeading :level="1">222</AnchoredHeading>
  </div>
</template>

<script>
import AnchoredHeading from "./render-function-demo";
export default {
  name: "RenderDemo",
  components: {
    AnchoredHeading
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

关于createdElement的更多参数介绍，请查看【官方文档】

使用 JSX 语法

JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 JavaScript里面写 XML，因为 JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具HTML的语义化和直观性。

一般我们使用Vue提供的模板template开发就满足大部分场景了。但是有时候，我们会使用渲染函数来抽象组件，而渲染函数有时候写起来是非常痛苦的。

这个时候就派上 JSX 上场了。
使用JSX需要配合jsx-vue2插件

先安装相关依赖

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

然后在babel.config.js:中增加如下代码

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

接下来就可以愉快的使用JSX语法了
我们先定义一个render-jsx-demo.js

export default {
  name: 'RenderJSXDemo',
  render() {
    return <p>hello</p>
  }
}

然后在组件中引入使用即可看到效果。

<template>
  <div>
    <RenderJSXDemo style="color:#333333" />
  </div>
</template>
<script>

import RenderJSXDemo from '@/jsx/render-jsx-demo'

export default {
  components: {
    RenderJSXDemo
  },

关于JSX语法的使用，请查看【官方文档】

示例

在线示例