认识h函数

vue推荐在绝大多数情况下使用模板来创建html，但是在一些特殊的场景，需要JavaScript的完全编程的能力，这个时候就可以使用渲染函数，比模板更接近编译器

vue在生成真实的DOM之前，会将所有的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）

template中的html最终也会使用渲染函数生成对应的VNode

可以使用JavaScript编写createVNode函数，生成对应的VNode

h()函数是一个用于创建vnode的一个函数

h()函数怎么使用？

h()函数接收三个参数

第一个参数：是标签的名称、组件、异步组件或者函数式组件

第二个参数：标签的属性，

第三参数：标签中的内容

注意：如果没有props，那么通常可以将children作为第二参数传入

如果产生歧义，可以将numm作为第二个参数传入，将children作为第三个参数传入

如果使用render函数的话，就不需要写template标签了

使用·h函数实现一个计数器

也可以使用setup替代data使用

也可以在setup中写render函数

接收的参数第一个是组件的情况

hellowrd.vue

app.vue

也可以传入插槽

app.vue

helloword.vue

再看jsx

如果要在项目中使用jsx，就需要添加对jsx的支持

jsx通过babel来进行转换，在vue中配置对应的插件即可

安装插件

npm install @vue/babel-plugin-jsx

在bable.config.js配置插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    '@vue/babel-plugin-jsx'
  ]
}

也可以使用组件的时候传入一个插槽

helloword.vue

相关