render介绍
众所周知，仅限于我大前端，Vue中的核心就是虚拟DOM。
通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通过Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器。
render函数的作用就是返回一个虚拟dom，将该虚拟dom渲染成真实的dom。
new Vue({
el: '#app',
router,
store,
render: (h) => h(App) // createElement 创建虚拟DOM
})render 函数有两个参数
export default {
name: 'Test',
// render作用:会return一个虚拟dom，return什么该组件就渲染什么
render: (h, context) => { // 第二个参数context存储了一些其他组件传过来的数据
console.log('context', context)
// h(标签名/组件,{虚拟dom配置},子集:子虚拟dom,也是虚拟dom节点信息,支持字符串与数组)
return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
}
}第一个参数 h 是 createElement 的缩写，其中有三个形参
- 第一个参数可以是一个 HTML 标签字符串，组件选项对象或者是解析标签或者组件的一个 async 异步函数。必须参数。
- 第二个参数 { 虚拟dom配置 } ，一个包含虚拟DOM相关属性的数据对象。可选参数。
- 第三个参数 是子虚拟节点，支持字符串与数组。可选参数。
第二个参数 context 可以拿到外部组件传进来的数据，如 prop、slots等
其他选项
functional
类型：
boolean详细：
使组件无状态 (没有
data) 和无实例 (没有this上下文)。他们用一个简单的render函数返回虚拟节点使它们渲染的代价更小。<script> export default { name: 'Test', /* 函数式组件。它内部的东西不是响应式了(就是需要什么东西就直接渲染什么东西， 不需要进行其他操作了)。没有生命周期等其他东西了，节省性能，起到性能优化作用*/ functional: true, // render作用:会return一个虚拟dom，return什么该组件就渲染什么 render: (h, context) => { // 第二个参数存储了一些其他组件传过来的数据 console.log('context', context) // h(标签名/组件,{虚拟dom配置},子集:也是虚拟dom节点信息支持字符串与数组) return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')]) } } </script>