VUE3中h()函数和createVNode()函数的使用解读
h()函数和createVNode()函数的使用
使用方法
- h(标签, {属性},内容)
- h(标签, {属性},[可以继续嵌套h()])
- createVNode(标签, {属性},内容)
- createVNode(标签, {属性},[可以继续嵌套createVNode()])
其实h()函数和createVNode()函数都是创建dom节点，他们的作用是一样的，但是在VUE3中createVNode()函数的功能比h()函数要多且做了性能优化，渲染节点的速度也更快。
import { createApp } from "vue";
//import App from "./App.vue";
import { defineComponent, h, createVNode } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
const img = require('./assets/logo.png'); // eslint-disable-line
const App = defineComponent({
render() {
return h("div", { id: "app" }, [
h("img", { src: img }),
h(HelloWorld, { msg: "HelloWorld" }),
createVNode("h1", { class: "hello" }, "HelloWorld")
]
);
},
});
createApp(App).mount("#app");
渲染出来的结果为：
VUE3中h方法和createVnode的实现
h方法是给用户来用的，它具备着多样性。我们先来写createVnode
在公共包shared里写上ShapeFlags
采用二进制来标识某些东西
在runtime-core模块里创建vnode.ts文件专门处理虚拟节点
虚拟节点有很多，组件的、元素的和文本的
用ShapeFlags来判断是否是字符串，判断儿子children是否是个数组
children不是数组类型，则标识为text_children
将不同情况打上ShapeFlag标识
最后把来共同标识这个vode节点的类型
为了后续的diff算法，我们要给这个虚拟节点上加一些属性和标识
h的用法
h(‘div')
h(‘div',{style:{‘color':‘red'}},‘hello')
h(‘div',‘hello')
h(‘div',h(‘span'))
h(‘div',[h(‘span'),h(‘span')])
h(‘div',null,‘hello',‘world')
h(‘div',null,h(‘span'))
h(‘div',null,[h(‘span')])创建h.ts文件来写h方法
先判断参数长度
如果参数长度等于2，那么我们要区分一下第二个参数是个h方法处理过的虚拟节点，还是一个普通的属性对象，或者是一个数组
如果第二个参数是不是一个数组并且也不是一个对象，那么判断第二个参数是否是h方法处理过的虚拟节点，如果是虚拟节点，那么调用createVnode，第二个参数传null，第三个参数包装成数组。如果不是虚拟节点，那肯定就是普通属性
如果第二个参数是数组或者不是对象，第二个参数传null，直接把propsChildren传入第三个参数，传第三个参数后，都可以处理到，包括文本元素
如果参数长度大于3，后续的参数包装成一个数组
如果参数长度等于3，并且children是一个虚拟节点，children包装成一个数组
最后统一调createVnode
总结，其实我们上述的一系列判断的核心是处理传入createVnode的第三个参数，这个参数只可能是文本或者数组
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue+tsc+noEmit导致打包报TS类型错误问题及解决方法
当我们新建vue3项目,package.json文件会自动给我添加一些配置选项,这写选项基本没有问题,但是在实际操作过程中,当项目越来越复杂就会出现问题,本文给大家分享vue+tsc+noEmit导致打包报TS类型错误问题及解决方法,感兴趣的朋友一起看看吧2023-10-10
我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下2023-05-05
vue created钩子函数与mounted钩子函数的用法区别
这篇文章主要介绍了vue created钩子函数与mounted钩子函数的用法区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了解决vue过滤器filters获取不到this对象的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue3.0如何修改浏览器标题(静态)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章介绍了vue实现消息无缝滚动效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
vue+element创建动态的form表单及动态生成表格的行和列
这篇文章主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
今天我们用一种新的布局方式，使用路由视图来实现布局样式，本文将给大家介绍如何使用Vue Router组合布局，文中有详细的代码示例供大家参考，感兴趣的同学可以跟着小编一起学习2023-05-05
reactive和ref都是vue3实现响应式系统的api,他们是如何实现响应式的呢,reactive和ref又有什么区别呢,下面小编就来和大家详细讲讲,希望对大家有所帮助2023-10-10
这篇文章主要介绍了浅谈Vue知识系列-axios，本文章内容详细，具有很好的参考价值，希望对大家有所帮助，需要的朋友可以参考下<BR>2023-01-01
最新评论