当前位置：首页 > news >正文

h函数 render函数 JSX基本用法

news 2025/8/3 4:54:27

1.1认识h函数（hyperscript工具基于JavaScript编写模板的工具）

    Vue推荐在绝大多数情况下使用模板来创建你的HTML，然后一些特殊的场景，需要JavaSript的完全编程能力，可以使用渲染函数，它比模板更接近编译器；VNode和VDOM的生成：Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而Vnode组合在一起形成一棵树结构，就是虚拟DOM(VDOM)编写template中的html最终也是使用渲染函数生成对应的VNode;可以利用JavaScript的编程能力，我们可以自己来编写createdVnode函数，生成对应的VNode；h函数：创建VNode的一个函数；更准备命名的是createdVnode函数,为了简便在Vue中简化为h函数；注意事项：如果没有props，那么通常可以将children作为第二个参数传入；如果会产生歧义，可以将null作为第二个参数传入，将children作为第三个参数传入；

1.2.h函数在render中的基本用法

// 基本用法
<script>import { h } from 'vue';export default {render () {return h('h2',{ class: 'title' }, 'Hello Render')}}
</script>

1.3.setup函数中返回VNode

<script>import { ref, h } from 'vue';export default {setup(){ // setup可以返回render函数，可以替代掉render函数const counter = ref(100);return () => {return h('div',{ class: 'app' }, [h('h2',null,  `当前计数：${ counter.value }`),h('button',{ onClick: () => counter.value++ }, '+1'),h('button',{ onclick: () => counter.value-- }, '-1')])}},// render () { // 可以使用this去拿数据，因为render函数内部是绑定了this//     return h('div',{ class: 'app' }, [//       h('h2',null,  `当前计数：${this.counter}`),//       h('button',{ onClick: () => this.counter++ }, '+1'),//       h('button',{ onclick: () => this.counter-- }, '-1')//     ])// }}
</script>

1.4.render函数中使用插槽

<script>// 父组件import { ref, h } from 'vue';import HelloWorld from './HelloWorld.vue'export default {// setup中的return对象怎么放进render函数中？// 不是放进去，对this做了一个代理， 例如：取this.counter的时候，proxy(, setupData里面去找这个数据，然后依次是data/ctx/props)render(){ // setup可以返回render函数，可以替代掉render函数return ('div', null, [h(HelloWorld, null, {default: props => h('h2', null,`我是App的插槽：${props.name}`) })])},}
</script>

<script>
// 子组件
import { h } from 'vue'export default {render () {return h('div', null, [h('h2', null, 'hello world'),this.$slots.default ? this.$slots.default({ name: 'coderwhy' }) : h('h2', null, '我是helloworld默认的插槽')])}}
</script>

2.1 JSX基本用法

JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。

	  jsx的babel配置在项目中使用jsx，那么我们需要添加对jsx的支持：jsx通常通过babel来进行转换(React编写的jsx就是通过babel转换的)对于Vue,只需要在babel中配置对应的插件即可；babel(工具)jsx   ->    render h()

 <script lang="jsx">import { ref } from 'vue'import HelloWorld from './HelloWorld.vue'// 父组件export default {setup () {const counter = ref(0)return {counter,}},render() {const increment = () => this.counter++const decrement = () => this.counter--return (// 下面jsx的html会通过babel转化成h函数，<div><h2>当前计数：{ this.counter }</h2><button onClick={ increment }>+1</button><button onClick={ decrement }>-1</button><HelloWorld >{ {default: props => <button onClick={ increment }>我是按钮</button> } }</HelloWorld></div>)}}
</script><script lang="jsx">
// 子组件export default {render () {return (<div><h2>Hello World</h2>{ this.$slots.default? this.$slots.default() : '哈哈哈哈' }</div>)}}
</script>