Функция render() в Vue3

Vue3 选项式 APIVue3 Options API

render()Эта функция очень важна в Vue3; её назначение — генерировать виртуальный DOM компонентов. Виртуальный DOM — это легковесный объект JavaScript, который Vue использует для описания реального DOM.

Черезrender()С помощью функции Vue может эффективно обновлять и отображать страницы.

Связь с шаблонами

В Vue мы обычно используемtemplateдля определения структуры компонента. Шаблон в конечном итоге компилируется вrender()функцию. Поэтому,render()функция является низкоуровневой реализацией шаблона.

Сценарии использования

render()Функция обычно используется в следующих сценариях:

  • Когда структуру компонента нужно динамически генерировать.
  • Когда требуется напрямую манипулировать DOM.
  • В сценариях с высокими требованиями к производительности вручную оптимизировать логику рендеринга.

Базовый синтаксис функции render()

render()Функция принимает один параметр — Vuehфункция (также называемаяcreateElementфункцией), используемая для создания виртуальных DOM-узлов.

Пример

export default {
  render(h) {
    return h('div', { class: 'container' }, 'Hello, Vue3!');
  }
}

Описание параметра

  1. Первый параметр: имя тега или имя компонента (строка или объект компонента).
  2. Второй параметр: объект атрибутов (необязательный), используется для определения DOM-атрибутов, событий и т. д.
  3. Третий параметр: дочерние узлы (необязательно), могут быть строкой, массивом или другими узлами виртуального DOM.

Расширенное использование функции render()

Динамическое создание дочерних узлов

render()Функция может динамически генерировать дочерние узлы на основе данных.

Пример

export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    }
  },
  render(h) {
    return h('ul', this.items.map(item => h('li', item)));
  }
}

Использование слотов

render()Функция может черезthis.$slotsполучить доступ к содержимому слота.

Пример

export default {
  render(h) {
    return h('div', [
      h('header', this.$slots.header),
      h('main', this.$slots.default),
      h('footer', this.$slots.footer)
    ]);
  }
}

Рендеринг компонентов

render()Функция может напрямую рендерить другие компоненты.

Пример

import MyComponent from './MyComponent.vue';

export default {
  render(h) {
    return h(MyComponent, { props: { message: 'Hello from parent!' } });
  }
}

Оптимизация функции render()

Сокращение ненужных рендеров

Черезrender()function, вы можете вручную управлять логикой рендеринга компонента, чтобы избежать ненужных обновлений DOM.

Пример

export default {
  data() {
    return {
      showMessage: true
    }
  },
  render(h) {
    return this.showMessage ? h('p', 'Hello!') : null;
  }
}

Использование Fragment

Vue3 поддерживаетFragment, и вы можетеrender()возвращать несколько корневых узлов в функции.

Пример

export default {
  render(h) {
    return [h('div', 'Left'), h('div', 'Right')];
  }
}

Vue3 选项式 APIVue3 Options API

Другие расширения