12-render函数

render函数

一、render的作用

非单文件组件时，创建vm的写法：

new Vue({el: '#root',template: `<App></App>`,components: {App}
})

但是该写法在脚手架中会报错。因为脚手架默认引入的是个残缺版的vue。

如果要避免报错，有2种解决方案：

1. 引入完整版的vue

2. 或者使用rander

在脚手架中，引入的Vue：

import Vue from 'vue'

实际引入的是dist/vue.runtime.esm.js，是一个不含模板解析器的js。

引入的js是配置在vue模块package.json的module配置项中。

如果要引入完整版的vue：

// 引入完整版的vue
import Vue from 'vue/dist/vue.js'

这时就可以正常的在new Vue中使用template配置。

如果使用了残缺版的vue，就需要使用render替换template配置。

例如：

template: `<h1>Hello</h2>`

替换为：

render(createElement) {return createElement('h1', 'Hello')
}

因为render没有用this，就可以简写为：

render:h => h('h1', 'Hello')

如果模板中的内容不是html标签，而是引入的组件，就可以写为：

render: h => h(App)

二、Vue库文件

vue组价的dist下有很多vue库文件：

其中vue.js是最完整最原始的vue，包括了Vue的核心功能和模板解析；

vue.runtime.xxxx.js是运行时库，里面移除了模板解析功能。

xxxx.esm.js是使用ES6进行模块化的库（ES6 Module）

xxxx.common.js使用CommonJS进行模块化的库

因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

对于.vue后缀的组件文件中使用标签配置的模板：

<template>{{msg}}
</template>

vue通过在package.json引入了vue-template-compiler来进行解析

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！