La función render en vue (común y fácil de entender)

Primero, una comprensión preliminar de la función render

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

new Vue({
    
    
  el: '#app',
  render: h => h(App)
})

En el proceso de usar scaffolding para crear un proyecto Vue, podemos ver fácilmente la función de renderizado. En comparación con otras etiquetas, todavía no estamos familiarizados con el renderizado, por lo que usted y yo entendemos este artículo.

2. ¿Por qué usar la función de renderizado?

VUE recomienda usar plantillas para crear nuestro HTML en la mayoría de los casos. Sin embargo, en algunos escenarios, realmente necesitamos la capacidad de programación completa de JavaScript, que es la función de representación, que está más cerca del compilador que de la plantilla. (Esta es la palabra oficial)
En pocas palabras, ¿por qué usamos la función de renderizado? ? Es debido a una de nuestras importaciones más utilizadas.

import Vue from "vue";

No parece haber ningún problema con que te presenten este, pero ahí es exactamente donde radica el problema. En diferentes versiones de vue, hay dos archivos js, vue.js y vue.runtime.xxx.js . Entre ellos (1) vue.js es una versión completa de vue, que incluye funciones básicas + analizador de plantillas. (2) vue.runtime.xxx.js es la versión en ejecución de vue, que solo contiene funciones básicas y no tiene un analizador de plantillas.

Para hacer que nuestros archivos empaquetados sean lo más pequeños posible, los desarrolladores de VUE introdujeron la versión en ejecución de Vue anterior. Debido a que vue.runtime.xxx.js no tiene un analizador de plantillas, no se puede usar el elemento de configuración de la plantilla. En este momento, debe usar la función de procesamiento para recibir la función createElement para especificar contenido específico y crear una plantilla html.

Tres, el análisis de la función render

La función de renderizado es la función de renderizado, es una función y su parámetro createElement también es una función.

En el código anterior, render: h => h (App), este es el método de escritura de la función de flecha ES6, puede usar h como un alias para createElement. Así que este código es en realidad equivalente a:

render: function (createElement) {
    
    
    return createElement(App)
}

La función de esta función es generar un nodo VNode. Después de que la función de procesamiento obtiene el nodo VNode, vuelve a la función de montaje de Vue.js, lo convierte en un nodo DOM real y lo monta en el nodo raíz.

El valor de retorno de la función createElement es VNode (es decir, nodo virtual).Para
obtener una introducción a VNode, puede leer este blog: Introducción a VNode

Los 3 parámetros de la función createElement

• Una cadena de etiquetas HTML, un objeto de opciones de componente o una función asíncrona que analiza cualquiera de los anteriores. Tipo: Cadena | Objeto | Función. requerido.
• Un objeto de datos que contiene propiedades relacionadas con la plantilla que puede usar en la plantilla. Tipo: Objeto. opcional.
• Los nodos virtuales secundarios (VNodes), construidos por createElement(), también pueden usar cadenas para generar "nodos virtuales de texto". Tipo: Cadena|Matriz. opcional.

new Vue({
    
    
  el: '#app',
  render:function (createElement) {
    
    
    //1.普通用法
    // createElement(标签，{属性}，[内容])
    return createElement("h2",{
    
    class:"box"},['hello',createElement("button",["按钮"])])
  }
})

Al mismo tiempo, createElement también puede pasar un componente, por lo que

render: h => h(App)

Equivalente a

render:function (createElement) {
    
    
    return createElement(App)
  }

La función de renderizado termina aquí.