Функция рендеринга Vue 3: как взять под контроль ваши компоненты Vue

Вам может быть интересно, с какой стати я должен использовать функцию рендеринга. Теперь представьте, что вам нужно отображать различные типы тегов H на основе значения свойства. Посмотрите, как это может выглядеть...

<!-- App.vue -->
<script setup>
import DynamicHeading from '../components/DynamicHeading.vue';
</script>

<template>
    <DynamicHeading :importance="2" />
</template>
<!-- DynamicHeading.vue -->

<script setup>
const props = defineProps({
    importance: {
        type: Number,
        default: 1
    },
})
</script>

<template>
    <div>
        <h1 v-if="importance == 1">This is title.</h1>
        <h2 v-if="importance == 2">This is title.</h2>
        <h3 v-if="importance == 3">This is title.</h3>
        <h4 v-if="importance == 4">This is title.</h4>
        <h5 v-if="importance == 5">This is title.</h5>
        <h6 v-if="importance == 6">This is title.</h6>
    </div>
</template>

Становится грязно, да? Вот тут-то и появляется функция рендеринга.
Сначала вам нужно ее импортировать.

import { h } from 'vue'

h() помогает создавать гипертекст. Однако при использовании функций рендеринга мы можем напрямую возвращать функцию рендеринга. Он очень гибкий в использовании. Используя его мощь, мы перепишем компонент DynamicHeading.vue.

<!-- DynamicHeading.vue -->
<script>
import { h } from 'vue'

export default {
    props: {
        importance: {
            type: Number,
            default: 1
        },
    },

    setup(props) {
        return () => h(`h${props.importance}`, 'This is title')   
    }
}

</script>

Видите ли, внутри функции рендеринга первый аргумент — это имя тега, а второй — содержимое. Отсутствует тег template, все операторы if убраны. Поскольку функция рендеринга находится внутри setup(), она может получить доступ к реквизитам.

Это даст вам полную власть над компонентом. Вот несколько примеров из Vue doc.

// all arguments except the type are optional
h('div')
h('div', { id: 'foo' })

// both attributes and properties can be used in props
// Vue automatically picks the right way to assign it
h('div', { class: 'bar', innerHTML: 'hello' })

// props modifiers such as `.prop` and `.attr` can be added
// with `.` and `^` prefixes respectively
h('div', { '.name': 'some-name', '^width': '100' })

// class and style have the same object / array
// value support that they have in templates
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// event listeners should be passed as onXxx
h('div', { onClick: () => {} })

// children can be a string
h('div', { id: 'foo' }, 'hello')

// props can be omitted when there are no props
h('div', 'hello')
h('div', [h('span', 'hello')])

// children array can contain mixed vnodes and strings
h('div', ['hello', h('span', 'hello')])

Не забудьте проверить документ api.

Однако важно отметить, что функции рендеринга следует использовать только при необходимости. В большинстве случаев для достижения тех же результатов можно использовать шаблоны. Шаблоны легче читать и поддерживать, и они могут быть такими же мощными, как и функции рендеринга.

Вот несколько примеров, когда вы можете захотеть использовать функцию рендеринга:

Когда вам нужно сделать много вычислений или условной логики.
Когда вам нужно получить доступ или манипулировать данными, переданными вашему компоненту.
Когда вам нужно создать пользовательские директивы.
Когда вам нужно реализовать сложную логику, которую было бы сложно или невозможно сделать с помощью шаблона.

Надеюсь, вам понравился этот урок. Спасибо за чтение.

Функция рендеринга Vue 3: как взять под контроль ваши компоненты Vue

Похожие вопросы