Vue3 高级语法(一)—— h函数、jsx
一、认识h函数Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器;前面我们讲解过VNode和VDOM的改变:Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚 拟DOM(VDOM);事实上,我们之前编写的 template
·
一、认识h函数
Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数 ,它比模板更接近编译器;
前面我们讲解过VNode和VDOM的改变:
- Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚 拟DOM(VDOM);
- 事实上,我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode;
- 那么,如果你想充分的利用JavaScript的编程能力,我们可以自己来编写 createVNode 函数,生成对应的VNode;
那么我们应该怎么来做呢?使用 h()函数:
- h() 函数是一个用于创建 vnode 的一个函数;
- 其实更准确的命名是 createVNode() 函数,但是为了简便在Vue将之简化为 h() 函数;
二、h()函数 如何使用呢?
h()函数 如何使用呢?它接受三个参数:
注意事项:
- 如果没有props,那么通常可以将children作为第二个参数传入;
- 如果会产生歧义,可以将null作为第二个参数传入,将children作为第三个参数传入;
三、h函数的基本使用
h函数可以在两个地方使用:
-
render函数选项中;
-
setup函数选项中(setup本身需要是一个函数类型,所有需要在箭头函数中再返回h函数创建的VNode);
render函数实现计数器
<script>
import {h} from "vue";
export default {
data() {
return {
counter: 0
}
},
render() {
return h('div', {class: 'app'}, [
h('h2', null, `当前计数:${this.counter}`),
h('button', {
onClick: () => this.counter++
}, '+1'),
h('button', {
onClick: () => this.counter--
}, '-1')
])
}
}
</script>
<style scoped>
</style>
setup函数实现计数器
<script>
import {h, ref} from "vue";
export default {
// data() {
// return {
// counter: 0
// }
// },
setup() {
const counter = ref(0)
return () => {
return h('div', {class: 'app'}, [
h('h2', null, `当前计数:${counter.value}`),
h('button', {
onClick: () => counter.value++
}, '+1'),
h('button', {
onClick: () => counter.value--
}, '-1')
])
}
}
}
</script>
<style scoped>
</style>
四、函数组件和插槽的使用
Home.vue:
<script>
import {h, ref} from "vue";
import HelloWorld from "./HelloWorld.vue";
export default {
render() {
return h(HelloWorld, null, {
default: props => h('span', null, `app传到HelloWorld组件中的内容: ${props.name}`)
})
}
}
</script>
<style scoped>
</style>
HelloWorld.vue:
<script>
import {h} from "vue";
export default {
render() {
return h('div', null, [
h('h2', null, 'Hello World!'),
this.$slots.default ? this.$slots.default({name: 'zep'}) : h('span', null, '我是hellowrold插槽的默认值')
])
}
}
</script>
<style scoped>
</style>
五、jsx的babel配置
如果我们希望在项目中使用jsx,那么我们需要添加对jsx的支持:
- jsx我们通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的);
- 对于Vue来说,我们只需要在Babel中配置对应的插件即可;
注意:新版本的vue-cli中不需要进行安装和配置操作了!
安装Babel支持Vue的jsx插件:
npm install @vue/babel-plugin-jsx -D
在babel.config.js配置文件中配置插件:
六、jsx计数器案例
<script>
import {ref} from "vue";
export default {
setup() {
const counter = ref(0)
const increment = () => {
counter.value++
}
const decrement = () => {
counter.value--
}
return {
counter,
increment,
decrement
}
},
render() {
return (
<div>
<div>当前计数: {this.counter}</div>
<button onClick={this.increment}>+1</button>
<button onClick={this.decrement}>-1</button>
</div>
)
}
}
</script>
<style scoped>
</style>
七、jsx组件的使用
更多推荐
已为社区贡献10条内容
所有评论(0)