render

​​render()​​​函数中重要的是使用​​h()​​​函数。这个h函数返回的是一个JavaScript对象，而不是一个DOM元素。返回的对象中包括页面上渲染的节点类型信息和任何子节点的描述。就是我们​​VNode​​也称为虚拟节点。我们使用这个函数的作用就是创建虚拟节点。接收3个参数，第一个参数可以是对象、字符串或者函数对象(一个HTML标签名、组件或异步组件，或者任何一种的一个async()函数)。但是第一个参数必须填写，不能省略。第二个参数用来表示与模板中元素属性对应的数据对象(包括普通属性、props和事件属性或者对应数据对象)。这个参数是可选的。第三个参数用来生成虚拟节点(子虚拟节点由h()函数构建，或者使用字符串生成文本虚拟节点，或者带有插槽的对象)，这个参数可以是字符串、数组或者对象。参数也是可选的。

我们需要注意的是，组件树中所有的VNode必须是唯一的，不能重复。如果需要很多相同的组件或者元素，可以使用工厂函数去解决。render函数中也有一些没有的功能，render函数中还可以使用if和else的判断以及map方法。比如没有与model指令直接对应的。但是我们可以自己去实现。render函数中也可以实现类似于​​v-on​​指令的操作，处理click事件，prop的名称为onClick。

render() {
    return Vue.h('p', Array.apply(null, { length: 6 }).map(() => {
        return Vue.h('p', 'zss');
    }))
}

render函数中可以使用驼峰命名将事件修饰符连接到事件名的后面。还有一些修饰符和处理函数是等价的。比如​​self​​​与​​if(event.target != event.currentTarget) return​​​。还有修饰键​​if(!event.ctrlKey) return​​​。​​event.keyCode​​​用来判断按键对应的码数。插槽中的内容可以使用VNode数组。可以使用render函数将插槽传递给子组件。render函数也不是万能的。当元素之间嵌套的层级很多时，如果都在render中去编写也比较复杂，所以可以使用​​jsx​​​解决这个问题。然后通过​​Babel​​插件使vue可以使用jsx语法。


import Tear form './Tear.vue'
const app = createApp({
    render() {
        <Tear level={4}>
            <h1>zss</h2>
        </Tear>
    }
})