Template&Render（createElement）&JSX

本文参考这篇文章 https://www.jianshu.com/p/7353974795dd

和https://blog.youkuaiyun.com/atu1111/article/details/122058433

和https://baijiahao.baidu.com/s?id=1712199305393629734&wfr=spider&for=pc

和https://zhuanlan.zhihu.com/p/346503152

和 https://baijiahao.baidu.com/s?id=1712199305393629734&wfr=spider&for=pc

1. 前言

创建HTML的三种方式： template 和 render()函数和JSX

2. template方式

vue提供了v-if、v-for等一系列的控制指令，但可能存在代码量大的问题

3. render()函数

通过JS逻辑代码，灵活的创建HTML。

createElemnt(newNode,newNodeConfig,childVNodeList)主要有三个参数：

• newNode：要创建的节点【必填参数】

参数类型:{String | Object | Function},

可以是要创建的HTML 标签名称，也可以是组件对象（可以来自一个.vue文件），也可以是返回为String或Vue Object的异步函数

• newNodeConfig：新节点的配置对象【选填】

• childVNodeList：新节点要包含的子节点集合【选填】

参数类型: {String | Array}

注意事项: vue官方教程标明传递的VNodes必须是唯一的，如果想重复创建相同的HTML元素，需要用工厂函数来实现

4. JSX

整段整段的JS配置代码，阅读性很差。可以使用JSX，直接在JS代码中书写HTML。

应用场景：

Vue 的模板语法简单易上手，实现的功能也几乎足够。JSX 不好上手，写起来代码量也多，但 JavaScript 灵活性很强，比如一些复杂表单的实现，函数式组件