Функция за изобразяване на 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“ са изчезнали. Тъй като функцията render е в 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 компоненти

Подобни въпроси