Prefacio
Los accesorios se refieren al componente principal que pasa parámetros al componente secundario. Introduzcamos cómo comprender el principio de los accesorios de vue3.
introducir
Antes de comprender su principio, necesitamos saber qué es el nodo virtual de vue y cuál es su rendimiento.
- Los nodos virtuales se dividen principalmente en dos tipos, a saber, tipo de componente y tipo de elemento y, por supuesto, hay nodos virtuales especiales como el tipo de texto.
- Los nodos virtuales recibirán tres parámetros básicos, a saber, tipo, accesorios y elementos secundarios.
Para tipos de componentes:
tipo es un objeto que incluye funciones básicas de renderizado y funciones de configuración, etc.
{
render() {
return h() // render函数返回一个虚拟节点
}
setup() {}
}Los accesorios son los parámetros pasados del componente principal al componente secundario.
Children es la ranura que se pasa del componente principal al componente secundario.
Para tipos de elementos:
- tipo es el tipo de elemento del nodo actual, como div
- props es el atributo del elemento del nodo actual, como la clase
- Children es el elemento secundario del nodo actual, que es una matriz. El contenido de la matriz puede ser componentes o elementos.
principio
premisa
En base a esto, podemos crear dos componentes que son padre e hijo entre sí, a saber, el componente APP (padre) y el componente FOO (hijo).
import { h } from '../h.js';
import { Foo } from './foo.js';
export const App = {
// render 页面元素内容即template
render() {
// 接收一个Foo，并通过h函数创建一个子组件node2
let node2 = h(
Foo,
{
count: 1
},
{}
)
return h(
'div',
{
id: 'root',
},
[
node2 // App接收Foo组件作为其子组件
]
);
},
setup() {
}
};import { h } from '../h.js';
// 定义一个Foo组件用于验证Props功能
export const Foo = {
// render 页面元素内容即template
render() {
// ui 页面内容
const foo = h(
'div',
{},
'Foo' + this.count
);
return h('div', {}, [foo]);
},
// 第一个参数props，用于父子组件传值
setup(props) {
console.log(props.count); // 打印传入的props值
}
};En el código anterior, podemos ver que aquí se crean dos archivos para representar el componente principal y el componente secundario.
Durante el proceso de compilación de vue3, primero analizaremos el componente, lo pasaremos a la función de parche , determinaremos si el tipo de nodo virtual actual es un componente o un elemento y luego procederemos con la siguiente compilación.
En el código del componente principal anterior, puedo ver que para Foo, creamos un componente llamado nodo2 y pasamos accesorios de recuento: 1 en la posición de accesorios.
let node2 = h(
Foo,
{
count: 1
},
{}
)Debido a que vue analizará recursivamente cada nodo virtual, este nodo2 también se analizará al final. ! ! !
A continuación se describe lo que se hizo al analizar este nodo2 y cómo implementar la función de los accesorios.
Crear objeto de instancia de componente
Si es un tipo de componente, pase el nodo virtual de nuestro componente como parámetro a createComponentInstance para crear un objeto de instancia de componente , de la siguiente manera:
export function createComponentInstance(vnode) {
const component = {
vnode,
type: vnode.type,
// 先创建一个空的setupState，去暂存组件类型虚拟节点的setup返回值
setupState: {},
// 创建一个props，用来存储组件虚拟节点接收的props，注意：props不允许改变 （props）
props: {},
}
return component
}Porque cuando creamos un vnode, en realidad recibiremos tres parámetros básicos, a saber, tipo, accesorios y elementos secundarios.
Entonces, el vnode pasado aquí tendrá un campo de accesorios, y este campo de accesorios es el recuento: 1 (detalles)
Supongamos que creamos un objeto de instancia de componente en este paso, llamado instancia
Inicializar operación de accesorios
Porque la instancia recibe el vnode y el vnode del componente en realidad contiene accesorios
Entonces se realizará una operación initProps . Si existen accesorios en el vnode, entonces los accesorios se montarán en el campo de accesorios debajo de la instancia .
En este momento, el objeto de instancia del componente puede obtener el valor de los accesorios normalmente.
Crea un objeto proxy para obtener accesorios.
Porque sabemos que en el código podemos obtener el valor de los accesorios a través de esto , y los accesorios se han montado en el objeto de instancia del componente.
Por lo tanto, se crea un objeto proxy ( este objeto luego se monta en la función de renderizado y otras ubicaciones a través de enlace, y esto se asigna a los accesorios correspondientes mediante accesorios ) .
instance.proxy = new Proxy({ _: instance }, PublicInstanceProxyHandlers);
const PublicInstanceProxyHandlers = {
get({ _: instance }, key) {
const { setupState, props } = instance
// 如果在传入的props中，则返回的对应的值 （props）
if (hasOwn(props, key)) {
return props[key]
}
}
}Los accesorios se pasan a la configuración como parámetros.
Porque sabemos que vue3 no tiene esto en la configuración, pero puede recibir accesorios y usarlos para obtener el valor pasado por el componente principal.
Luego hemos montado el valor de los accesorios en el objeto de instancia del componente, para que podamos pasar los accesorios como parámetros a la configuración.
const {setup} = instance.type.setup // 获取setup函数
// 在执行setup的时候将props传入即可
setup(shallowReadonly(instance.props))Por lo tanto, cuando lo usamos, podemos leer el valor en la configuración recibiendo accesorios.
| 1 2 3 4 |
|
Montar proxy para renderizar
Al analizar un nodo virtual, la función de configuración se ejecutará primero y luego se renderizará, porque podemos obtener el valor de los accesorios a través de esto .
Entonces montamos el objeto proxy que creamos antes en la función de renderizado a través de bind para asegurarnos de que pueda obtener correctamente el valor de los accesorios.
| 1 |
|
Resumir
Con esto concluye la explicación del principio de los puntales.
Los accesorios son en realidad parámetros insertados por el componente principal en los accesorios del nodo virtual del componente secundario.
Por lo tanto, cuando creamos el objeto de instancia del componente del subcomponente, podemos obtener el valor de estos accesorios y montarlo en el objeto de instancia del componente del subcomponente.
Si es necesario utilizar accesorios en un componente, normalmente se configuran o renderizan dos ubicaciones.
Para la configuración, podemos pasar los accesorios del objeto de instancia del componente como parámetros, para que pueda usarse, pero tenga en cuenta que los accesorios son un valor que no se puede cambiar, por lo que debemos ajustarlo con solo lectura.
En la página del componente, podemos leer el valor de los accesorios a través de esto. Entonces, al renderizar la página y llamar a la función de renderizado, podemos crear un objeto proxy y montar este objeto en la función de renderizado. A través del proxy Para leer el valor de los accesorios correspondientes