何为渲染函数

image.png
如上图的效果

index.html 代码如下

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title><%= htmlWebpackPlugin.options.title %></title>
  9.   </head>
  10.   <body>
  11.     <noscript>
  12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  13.     </noscript>
  14.     <div id="app"></div>
  15.     <!-- built files will be auto injected -->
  16.   </body>
  17. </html>

main.js的代码

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. //生产环境下错误提示是否开启
  4. Vue.config.productionTip = false
  6. new Vue({
  7.   render: h => h(App),
  8. }).$mount('#app')

通过main.js 的代码你会发现，那些图片的上的效果都是通过这个render函数渲染出来的，没有别的解释啦，因为主入口文件中只有它啦

将render函数替换为template

当写入template会报错，因为我们使用vue框架搭建的的运行版，运行版本没有编译器，没法编译template中的代码

版本分为

  • 运行版
  • 完整版

render函数在生命周期的那里

渲染函数 - 图2

官方的解释

Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

注意

当使用render函数渲染的文件，不可使用template(此处的template是书写HTML代码的部分，不是js代码中的temlate)。render函数比js代码中的template的代码优先级高，当js里有render函数，js函数里template就不会生效，但是template是写在ja外面（也就是HTML代码）会渲染HTML中的template，不会渲染js中的render函数

官网案例

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

  1. <h1>
  2.   <a name="hello-world" href="#hello-world">
  3.     Hello world!
  4.   </a>
  5. </h1>

对于上面的 HTML，你决定这样定义组件接口：

  1. <anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：

  1. <script type="text/x-template" id="anchored-heading-template">
  2.   <h1 v-if="level === 1">
  3.     <slot></slot>
  4.   </h1>
  5.   <h2 v-else-if="level === 2">
  6.     <slot></slot>
  7.   </h2>
  8.   <h3 v-else-if="level === 3">
  9.     <slot></slot>
  10.   </h3>
  11.   <h4 v-else-if="level === 4">
  12.     <slot></slot>
  13.   </h4>
  14.   <h5 v-else-if="level === 5">
  15.     <slot></slot>
  16.   </h5>
  17.   <h6 v-else-if="level === 6">
  18.     <slot></slot>
  19.   </h6>
  20. </script>
  1. Vue.component('anchored-heading', {
  2.   template: '#anchored-heading-template',
  3.   props: {
  4.     level: {
  5.       type: Number,
  6.       required: true
  7.     }
  8.   }
  9. })

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 <slot></slot>，在要插入锚点元素时还要再次重复。
虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

  1. Vue.component('anchored-heading', {
  2.   render: function (createElement) {
  3.     return createElement(
  4.       'h' + this.level,   // 标签名称
  5.       this.$slots.default // 子节点数组
  6.     )
  7.   },
  8.   props: {
  9.     level: {
  10.       type: Number,
  11.       required: true
  12.     }
  13.   }
  14. })

看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API