createApp

createApp 返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。使用如下：

const { createApp } = Vue
const app = createApp({
    setup() {
    },
})

获取app实例，可以用链式调用之后的方法。值得我们注意的是：在Vue3中的实例化与Vue2相比是不一样的。

h

h函数返回一个”虚拟节点“，通常缩写为 VNode。我们在自定义组件或者需要动态的去改变dom的时候可以用此函数，但是自定义组件我们一般用单文件.vue。

参数

接收三个参数：type，props 和 children。

type

HTML 标签名、组件、异步组件或函数式组件，此参数是必须的，可以是：String | Object | Function，我们可以用渲染函数自定义组件为例,使用如下：

app.component('my-component', {
    render(){
        return h('h1',{},"hello world")
    }
})

无论type值是什么，其本质是个tag：原生元素或者自定义组件名。

props

一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。此参数是可选的，只能是：Object。使用如下：

app.component('my-component', {
    render() {
        return h('h1', {
            name:'slifree',
            onClick:function(){
                console.log('click');
            }
        }, "hello world")
    }
})

children

子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。此参数是可选的，可以是：String | Object | Array，是用来嵌套dom结构的，使用如下：

app.component('my-component', {
    render() {
    //以 array 为例
        return h('div', {}, [
            'hello',
            h('h1', {}, 'world')
        ])
    }
})

注意事项

VNodes 必须唯一

如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。假如你需要五个相同的元素：

我们不可以这样做

render() {
  const h1 = h('h1', 'hello world')
  return h('div', [
    // 错误 - 重复的 Vnode!
    h1, h1
  ])
}

我们可以这样做

render() {
  return h('div',
    Array.from({ length: 5 }).map(() => {
      return h('h1', 'hello world')
    })
  )
}

代替模板功能

根据VNodes 必须唯一的示例可以看出，我们可以使用js函数来代替模板功能：v-if 和 v-for，接下来让我们去了解它们吧。

如果使用模板写法的 v-if 和 v-for：

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

那么在渲染函数中用 JavaScript 的 if/else 和 map() 来重写：

props: ['items'],
render() {
  if (this.items.length) {
    return h('ul', this.items.map((item) => {
      return h('li', item.name)
    }))
  } else {
    return h('p', 'No items found.')
  }
}

总结

在Vue3中，利用createApp来获取app实例，这与Vue2是不同的，这一点我们需要注意以下。
我们要合理的使用h函数，但是在项目开发中一般会使用单文件.vue，而不是渲染函数来定义组件。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之API篇（五）