Función render() de Vue3

Vue3 选项式 APIVue3 API de opciones

render()La función es una función muy importante en Vue3; su función es generar el DOM virtual del componente. El DOM virtual es un objeto JavaScript ligero que Vue utiliza para describir el DOM real.

A través derender()la función, Vue puede actualizar y renderizar la página de manera eficiente.

Relación con las plantillas

En Vue, normalmente usamosplantillas (template)para definir la estructura del componente. Las plantillas finalmente se compilan enrender()función. Por lo tanto,render()la función es la implementación subyacente de las plantillas.

Casos de uso

render()La función se utiliza generalmente en los siguientes casos:

  • Cuando se necesita generar dinámicamente la estructura del componente.
  • Cuando se necesita manipular el DOM directamente.
  • En escenarios con altos requisitos de rendimiento, optimizar manualmente la lógica de renderizado.

Sintaxis básica de la función render()

render()La función recibe un parámetro, que es lahfunción h de Vue (también llamadacreateElementfunción createVNode), que se utiliza para crear nodos del DOM virtual.

Ejemplo

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

Descripción de parámetros

  1. El primer parámetro: nombre de etiqueta o nombre de componente (cadena u objeto de componente).
  2. El segundo parámetro: objeto de atributos (opcional), que se utiliza para definir atributos del DOM, eventos, etc.
  3. El tercer parámetro: nodos hijos (opcional), pueden ser cadenas, arrays u otros nodos del DOM virtual.

Uso avanzado de la función render()

Generar dinámicamente nodos hijos

render()La función puede generar nodos hijos dinámicamente según los datos.

Ejemplo

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

Uso de slots

render()La función puede accederthis.$slotsal contenido de los slots.

Ejemplo

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

Renderizar componentes

render()La función puede renderizar directamente otros componentes.

Ejemplo

import MyComponent from './MyComponent.vue';

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

Optimización de la función render()

Reducir renderizaciones innecesarias

Medianterender()la función, se puede controlar manualmente la lógica de renderizado del componente, evitando actualizaciones innecesarias del DOM.

Ejemplo

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

Uso de Fragment

Vue3 admite FragmentFragment, lo que permiterender()devolver múltiples nodos raíz en la función render().

Ejemplo

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

Vue3 选项式 APIVue3 API de opciones

Otras extensiones