Vue3 sample code for handling templates and rendering functions

How to handle templates and rendering functions in Vue 3?

is a popular front-end framework known for its ease of learning and use. In Vue 3, the use of templates and rendering functions becomes more flexible and powerful with the Composition API and the new setup syntax sugar. In this blog, we will dive into how Vue 3 handles templates and rendering functions and use sample code to show how to effectively utilize these features.

What are templates and rendering functions?

In Vue, templates are used to declaratively describe the UI, written in HTML syntax. They can usually be regarded as view parts of components. Rendering functions are another way to define components in JavaScript, allowing for higher flexibility and dynamics. The rendering function returns a VNode (virtual node), and Vue converts these VNodes to DOM.

Basic structure of templates

In Vue 3, the basic structure of the template is still similar to Vue 2. Here is a simple template example:

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello Vue 3');
    const count = ref(0);

    function increment() {
      ++;
    }

    return { title, count, increment };
  },
};
</script>

The above code shows a simple component with a title, a button and a counter. When the user clicks a button, the value of the counter increases.

Use of rendering functions

The use scenario of rendering functions is mainly when the function of the template cannot meet the needs. For example, conditional rendering, list rendering, etc. At this time, you can use the rendering function to directly control the creation of VNode. Here is an example using a rendering function:

import { h, ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello Vue 3 with Render Function');
    const count = ref(0);

    function increment() {
      ++;
    }

    return () =>
      h('div', [
        h('h1', ),
        h('button', { onClick: increment }, 'Increment'),
        h('p', `Count: ${}`),
      ]);
  },
};

In this example, we usehFunction to create VNode.hThe first parameter of the function is the label name to be rendered, the second parameter is an object, which can contain event handlers and attributes, and the last parameter is a child node.

Select template and rendering function

When choosing to use templates or render functions, you can consider the following points:

1. readability: Templates are usually easier to read and understand, especially for front-end developers.
2. flexibility: Rendering functions allow more dynamic control and are suitable for complex logic or conditional rendering.
3. performance: Rendering functions sometimes outperform templates in performance, especially in the case of a large number of dynamic nodes.

Use setup syntax sugar

Vue 3 introducedsetupSyntactic sugar makes state management and life cycle clearer. existsetupIn the function, we can define responsive data, computational properties and methods for the component. The following example shows how tosetupUse templates and rendering functions in  .

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
    <ul>
      <li v-for="item in items" :key="">{{  }}</li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Using Template and Setup');
    const count = ref(0);
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ]);

    function increment() {
      ++;
    }

    return { title, count, items, increment };
  },
};
</script>

In this example, we not only usesetupTo create responsive data, and also combinev-forDirective renders a list. Clear structure and easy to maintain.

Use rendering functions to combine setup

If we decide to use a rendering function instead of a template, we can rewrite it like this:

import { h, ref } from 'vue';

export default {
  setup() {
    const title = ref('Using Render Function with Setup');
    const count = ref(0);
    const items = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ]);

    function increment() {
      ++;
    }

    return () =>
      h('div', [
        h('h1', ),
        h('button', { onClick: increment }, 'Increment'),
        h('p', `Count: ${}`),
        h('ul', (item => h('li', { key:  }, ))),
      ]);
  },
};

In this way, you can see the flexibility of rendering functions. Rendering functions can help you programmatically customize the UI when it comes to conditional rendering or dynamic element generation.

Summarize

Vue 3 greatly enhances developers' ability to handle templates and rendering logic through the introduction of setup syntax sugar and rendering functions. Templates provide intuitive UI description, while rendering functions provide greater flexibility for complex application scenarios. When choosing both, developers can decide which method to use based on specific needs.

I hope that through this article, you can have a deeper understanding of the usage of templates and rendering functions in Vue 3, and be able to flexibly use them in actual projects. No matter which method you choose, Vue 3 will bring endless possibilities to your front-end development!

The above is the detailed content of the sample code for Vue3 processing templates and rendering functions. For more information about Vue3 processing templates and rendering functions, please pay attention to my other related articles!