render 函数理解

感觉render是为补救template缺点而诞生的

template是有标签，根据标签插值内容
render厉害一点，可以渲染标签，并添加到虚拟DOM中
注意下：
1，template是模板语法，而render是js语法，render其实是用来生成模板；
2，render用多了，发现挺麻烦，有一个插件jsx可以让render代码写得更自在

虚拟DOM

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪。
return createElement('h1', 'Hello World!')
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字是createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

render方法会传入一个createElement函数，它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果，也就是模版内的顶层元素（这个方法在vue2的习惯性使用中经常用h来命名）。
render 实例：

export default {
  render: function(createElement) {
        const menu_items = ["首页","搜索","分类","系统"]
        return createElement('ul', 
          menu_items.map(item => {
            return createElement('li', {
              class: {
                'uk-nav': true
              },
              domProps: {
                innerHTML: item
              }
            })
          })
        )
      },
}

相当于模板语法：

<ul>
  <li v-for="item in menu_items"  :class="{'uk-nav': true}">
    {{ item }}
  </li>
</ul>

渲染结果：

7906F8BE-42CB-4370-A24D-57037D9ADAA8.png

createElement的定义

createElement(tag,data,children)

返回值vNode（虚拟节点）

参数说明:

　　　　tag　　　　类型：String/Object/Function　  说明：一个HTML标签，组件类型,或一个函数

　　　　Data　　　 类型：Object                   说明：一个对应属性的数据对象,用于向创建的节点对象设置属性值

　　　　Children　　类型：String/Array　　　　　　　说明：子节点

向构造的VNode对象设置文本时可以直接传入字符串，例如：
　　　　createElement('div','这是行内文本')
　　　　输出结果就是：
　　　　<div>这是行内文本</div>

参考：https://www.cnblogs.com/qdcnbj/p/8313061.html

以下是我的代码，如果有问题，请指出一二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Render</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="container">
      <tb-heading></tb-heading>
    </div>
    
    <script>
    Vue.component('tb-heading', {
      render: function(createElement) {
        const menu_items = ["首页","搜索","分类","系统"]
        return createElement('ul', 
          menu_items.map(item => {
            return createElement('li', {
              class: {
                'uk-nav': true
              },
              domProps: {
                innerHTML: item
              }
            })
          })
        )
      },
    });
    new Vue({
      el: '#container',
      methods: {
      }
    });
    </script>
</body>
</html>