VUE3中h()函数和createVNode()函数的使用解读

目录
  • h()函数和createVNode()函数的使用
    • 使用方法
  • VUE3中h方法和createVnode的实现
    • 在公共包shared里写上ShapeFlags
    • 在runtime-core模块里创建vnode.ts文件专门处理虚拟节点
    • 为了后续的diff算法,我们要给这个虚拟节点上加一些属性和标识
    • h的用法
    • 创建h.ts文件来写h方法

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的第三个参数,这个参数只可能是文本或者数组

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue3中的render函数里定义插槽和使用插槽

    目录 render函数里定义插槽和使用插槽 定义插槽 定义有插槽的组件使用插槽 vue3 render函数小变动 render函数的参数 render函数签名 VNode属性格式 render函数里定义插槽和使用插槽 vue3中this.slots和vue2的区别 vue3:this.slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用.如v-slot:foo插槽分发的内容通过th

  • Vue h函数的使用详解

    目录 一.认识 二.使用 1.h() 参数 2.简单的使用 3.实现一个计数器案例 4.函数组件和插槽的使用 三.jsx的使用 1.jsx的认识 2.下载Babel插件支持vue(现在貌似脚手架直接支持) 3.配置babel 4.简单的使用 5.计数器案例 6.组件和插槽的使用 一.认识 文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91 ​ h() 到底会返回什么呢?其实不是一个实际的 DOM 元素.它更准确的

  • vue语法之render函数和jsx的基本使用

    目录 h函数的使用 h函数基本介绍 h函数使用流程 h函数案例练习 jsx的体验 jsx的babel配置 jsx计数器案例 h函数的使用 h函数基本介绍 Vue推荐在绝大数情况下使用模板来创建你的HTML,然后一些特殊的场景,你真的需要JavaScript的完全编程的能力,这个时候你可以使用渲染函数,它比模板更接近编译器: 前面我们讲解过VNode和VDOM的概念: Vue在生成真实的DOM之前,会将我们的节点转换成VNode,而VNode组合在一起形成一颗树结构,就是虚拟DOM (VDOM):

  • VUE3中h()函数和createVNode()函数的使用解读

    目录 h()函数和createVNode()函数的使用 使用方法 VUE3中h方法和createVnode的实现 在公共包shared里写上ShapeFlags 在runtime-core模块里创建vnode.ts文件专门处理虚拟节点 为了后续的diff算法,我们要给这个虚拟节点上加一些属性和标识 h的用法 创建h.ts文件来写h方法 h()函数和createVNode()函数的使用 使用方法 h(标签, {属性},内容) h(标签, {属性},[可以继续嵌套h()]) createVNode(

  • vue3中h函数的常用使用方式汇总

    目录 前言 render VNode h 渲染组件 h函数中使用"v-model" 使用场景 总结 前言 一般情况下每个vue组件都用"<template>"写html, 但实际还可以在js代码中通过render函数生成dom. 最主要常见组件库也需要配合"h"使用. render render是组件的一个选项, 他的返回值会被作为组件的DOM结构. <script> import { defineComponent} f

  • vue3中的hook简单封装

    目录 vue3的hook封装 vue3的hooks总结 下面总结一下如何去书写hooks 计数器的hook vue3的hook封装 vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护. 使用 import useTest from "../../hooks/useTest"; export default defineComponent({   name: "vue3Test&qu

  • vue3中的hooks总结

    目录 vue3的hooks总结 计数器的hook vue3自定义hooks vue3的hooks总结 vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中.这样其实和我们在vue2中学的mixin比较像.下面我们总结一下如何去书写hooks. 首先应该先建立一个hooks文件夹:其目的是为了存放hook文件. 建立相关的hook文件:一般使用use开头. 计数器的hook useTitle的hooks useScrollPostion用来监

  • vue2.x中h函数(createElement)与vue3中的h函数详解

    目录 1. vue2.x的 h 函数(createElement) 2. vue3 h函数配置项 2.1 v-model实现(以下开始为官网实现) 2.2 v-on 2.3 事件修饰符 2.4 插槽 2.5 component 和 is 2.6 自定义指令 2.7 内置组件 2.8 渲染函数的返回值 2.9 JSX 总结 1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 inn

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

  • 详解vue3中setUp和reactive函数的用法

    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的. 但是我们却不可以在setUp中去调用methods中的方法. 为什么了??? 我们先了解一下下面这两个生命周期函数,分别是: beforeCreate 表示data 中的数据还没有初始化,是不可以使用的 Created : data已经被初始化了,可以使用 setUp在beforeCreate 和 Created 这两个函数之间. 是不是就知道为啥setUp中不可以去调用methods中的方法了. 2.setU

  • Vue3中SetUp函数的参数props、context详解

    1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

随机推荐