Is `h` equal to `createVNode` function?

Both h and createVNode are exposed from vue.

The documentation on this page seems to imply that they are interchangeable:

The h() function is a utility to create VNodes. It could perhaps more accurately be named createVNode().

However, replacing h with createVNode will result in an error being thrown:

<script lang="ts">
  import { createVNode, defineComponent, h } from 'vue'

  export default defineComponent({
    setup() {
      // This works fine
      return () => h('strong', 'Foo')

      // This throws an error
      return () => createVNode('strong', 'Foo')
    },
  })
</script>

Answer №1

h is the user-friendly variant of createVNode, which is exposed. In case you want to directly call createVNode, you will need to add a different set of arguments. Check out the details here:

https://github.com/vuejs/vue-next/blob/060c5f1d0ae999cd8c8fb965e8526ffab17ac2d1/packages/runtime-core/src/vnode.ts#L326


    export const createVNode = (__DEV__
      ? createVNodeWithArgsTransform
      : _createVNode) as typeof _createVNode

    function _createVNode(
      type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
      props: (Data & VNodeProps) | null = null,
      children: unknown = null,
      patchFlag: number = 0,
      dynamicProps: string[] | null = null,
      isBlockNode = false
    )

Answer №3

// Function h for actual implementation
function h(type, propsOrChildren, children) {
    const argsLength = arguments.length;
    if (argsLength === 2) {
        if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
            // Return single vnode without props
            if (isVNode(propsOrChildren)) {
                return createVNode(type, null, [propsOrChildren]);
            }
            // Return props without children
            return createVNode(type, propsOrChildren);
        }
        else {
            // Omit props and return
            return createVNode(type, null, propsOrChildren);
        }
    }
    else {
        if (argsLength > 3) {
            children = Array.prototype.slice.call(arguments, 2);
        }
        else if (argsLength === 3 && isVNode(children)) {
            children = [children];
        }
        return createVNode(type, propsOrChildren, children);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

When I write incorrect TypeScript code in my project set up with create-react-app, running tests using npm test does not show any errors in the terminal. Is this normal behavior? It would be helpful to see these errors to avoid writing incorrect TypeScript ...

Can you explain the distinction between employing express.urlencoded() with extended set to true as opposed to setting it to false along with performing manual JSON stringify/parse calls?

Within my NodeJS/Express server, I am faced with the decision of setting extended to either true or false for the urlencoded middleware: app.use(express.urlencoded({ extended: true/false })); I have come to understand that when set to false, it signifies ...

Analyzing arrays and object key/value pairs based on a specific value in javascript

I want to create a new object with key/value pairs. The new object should include values from an existing key/value object as well as unique values from an array. Here is the array: [{ name: "Computer", name: "Car", name: "House&q ...

CSS Only Sidebar Dropdown (without using Bootstrap)

I want to create a sidebar with collapsible dropdown options and smooth animations using only pure css/js/html/jquery, without relying on bootstrap like I did in the past. Here is an example of what I created previously with bootstrap: Now, as a challenge ...

Using Npm to install a module results in an abundance of files being provided

Back when I used npm install 6 months ago to install a module, it would create a new folder under node_modules containing all the files for that module. However, now when I use it, it creates multiple files for one module. How can I install a module to a ...

Error: Excessive recursion in Nuxt 3 module component

I am currently developing a Nuxt 3 module that includes a basic button component. The button is designed to toggle a boolean value when clicked, with the underlying logic stored in a separate file using pinia as a store. Here is an example of the store co ...

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

Obtain the RadNumericTextBox value using JavaScript or jQuery in an ASP.NET environment

In my ASP.Net Web Page, I have a RadNumericTextBox within a DetailsView. I am attempting to access this element in JavaScript using jQuery. Despite successfully obtaining the RadNumericTextBox as a variable in JavaScript and verifying that it contains all ...

Error encountered while adding x-ray-scraper to project using Npm

I am currently working on a Vue application and utilizing the x-ray-scraper library. However, when I attempt to run npm run serve in the terminal to preview the application locally, I encounter the following error: This dependency was not found: * _http_c ...

Encase an asynchronous function inside a promise

I am currently developing a straightforward web application that manages requests and interacts with a SQL database using Express and Sequelize. My issue arises when I attempt to call an async function on an object, as the this part of the object becomes u ...

How to Use Jquery to Retrieve the Selected Option Value and Append a Parameter

I am attempting to expand the value by adding "&fullpage=true" <select name="navMenu" onchange="go(this.options[this.selectedIndex].value)"> <option value="-">Choose</option> <option value="page.html&amp;nyo=0" class="ccbnLnk" ...

Using a forEach loop within the RequestAnimationFrame function

I am currently developing a project using THREEjs and would like to organize it in the following manner: class Blah scene : new THREE.Scene() renderer : new THREE.WebGLRenderer() camera : new THREE.PerspectiveCamera() ...

Vue combined with modules for namespace management

I seem to be facing a problem that I thought I had solved before by using namespaces, but unfortunately nothing seems to be working. Here's my module: const Algo1Module = { namespaced: true, state: { questions: { question1: "test&qu ...

Accessing a nested value in MongoDB: A step-by-step guide

I am working on a document where I have a category object containing fields for category name, cost, and date. My task is to retrieve categories specifically from the year "2022". The console is currently showing "[]" output, but I want it to display categ ...

Enhancing the default functionality of React.FC within Next.js

Currently, I am working on a tutorial in Nextjs that employs the code snippet below in JavaScript. However, I am planning to transition it to TypeScript. Since I am relatively new to TypeScript, I have attempted various solutions from different sources but ...

What is causing the recurring failure of file input changes to take effect?

Here is the code snippet I'm working with: <input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" /> Along with the handler function: public onFileSelected(e: Fi ...

Guide on incorporating Admin LTE 3 into Nuxt.js

Is there a way to seamlessly combine adminlte 3 with Nuxt.js? Following the installation of adminlte 3 via npm, I attempted to add css and js files in nuxt.config.js. While the styles appear to be functioning correctly, the javascript is not executing as ...

Exploring the power of Vue3 with Shadow DOM in web components

I've been experimenting with web components using Vue3 and I'm curious about how the Shadow DOM works. I encountered an issue where a third party library was trying to access elements using getElementById() and it was throwing an error because th ...

Is there a way to search for a specific item within a nested array?

I have 2 arrays within an array, each containing objects. How can I locate the object with the name "Sneijder"? const players = [ [ { id: 1, name: "Hagi", }, { id: 2, name: "Carlos", }, ], [ { id: 3 ...

Making a list of members from an array of objects

Let's say I have a collection of items structured like this: var itemList = [ { date: '22/9/2016', status: 1, id: '11111' }, { date: '23/9/2016', status: 1, id: '22222' }, { date: '24/9/2016&ap ...