dominio cruzado
Dominio cruzado: en primer lugar, el mismo origen se refiere al mismo "protocolo + nombre de dominio + puerto", incluso si dos nombres de dominio diferentes apuntan a la misma dirección IP, no tienen el mismo origen jsonp, el atributo src de la etiqueta iframe y el proxy inverso de configuración de nginx del front-end, el proxy de middleware de nodejs entre dominios o configure cors para permitir el acceso a todos los nombres de dominio, el front-end usa la opción de proxy en webpack devserver para configurar el proxy, websocket no restringido por la política del mismo origen.
orientado a esto
En el ámbito global, esto se refiere al objeto global (generalmente el objeto de ventana en un entorno de navegador).
En una función, el valor de this depende de cómo se llamó la función.
Si la función se invoca como método de un objeto, esto apunta al objeto sobre el cual se invocó el método.
Si la función se llama como una función ordinaria, esto apunta al objeto global (en modo no estricto) o indefinido (en modo estricto).
Si la función se invoca mediante el método de llamada, aplicación o vinculación, esto apunta al objeto especificado por el primer parámetro del método de llamada, aplicación o vinculación.
Si la función se llama como constructor (usando la nueva palabra clave), esto apunta al objeto recién creado.
En la función de flecha, el valor de esto se hereda del alcance externo y no cambiará debido a cambios en el método de llamada.
alcance
La cadena de alcance es un mecanismo para encontrar variables y funciones, que es una estructura de cadena compuesta por los objetos variables del entorno de ejecución actual y todos sus entornos de ejecución principales. Cuando se accede a una variable o función en un entorno de ejecución, primero buscará en el objeto variable del entorno de ejecución actual. Si no se puede encontrar, buscará en la cadena de alcance hasta encontrar la variable o función correspondiente, o alcanzar el valor final El objeto global externo (como una ventana).
La creación de la cadena de alcance se determina cuando se define la función y está relacionada con la posición de definición de la función. Cuando se llama a la función, se crea un nuevo entorno de ejecución, que contiene un nuevo objeto variable y se agrega al frente de la cadena de alcance. De esta manera, el interior de la función puede acceder a las variables y funciones en su alcance y su alcance exterior, formando una cadena de alcance.
cadena prototipo
Cada objeto inicializará una propiedad dentro de él, que es __proto__. Cuando accedemos a la propiedad de un objeto,
si esta propiedad no existe dentro del objeto, entonces irá a __proto__ para encontrar esta propiedad, y este __proto__ tendrá su propio __proto__, así que sigue buscándolo así, que es lo que solemos llamar el concepto de cadena de prototipos. Según el estándar, proto no está abierto al público, es decir, es una
relación de propiedad privada: instancia.constructor.prototype == instancia.proto
TS implementa la interfaz
export interface ICategoryList {
id: number;
name: string;
pid: number;
gmt_create: string;
gmt_modified: string;
level: Level | null;
subCategoryList?: ICategoryList[];
}
posición
El atributo de posición se utiliza para controlar el posicionamiento de los elementos. Los valores comunes incluyen:
estático: el valor predeterminado, que indica que el elemento normalmente se coloca en el flujo del documento y no se verá afectado por los atributos superior, derecho, inferior e izquierdo.
Relativo: genere elementos posicionados relativamente y colóquelos en relación con sus posiciones normales. Ajuste la posición del elemento estableciendo los atributos superior, derecho, inferior e izquierdo. No se separará del flujo del documento y los elementos circundantes lo harán. aún estar organizado de acuerdo con el diseño normal.
absoluto: genera elementos posicionados absolutamente, posicionados en relación con el elemento principal posicionado no estático más cercano, o en relación con el elemento raíz del documento (es decir, la ventana del navegador) si no hay un elemento principal posicionado no estático. Los elementos absolutamente posicionados se separarán del flujo de documentos y no ocuparán espacio. Puede controlar con precisión la posición del elemento configurando los atributos superior, derecho, inferior e izquierdo.
corregido: genera elementos absolutamente posicionados, posicionados en relación con la ventana del navegador, y no cambiará de posición a medida que se desplaza la página. Puede especificar la posición del elemento configurando los atributos superior, derecho, inferior e izquierdo.
heredar: especifica heredar el valor del atributo de posición del elemento principal.
Para posicionamiento relativo y absoluto, el origen (dato de coordenadas) es la posición del elemento en el flujo normal de documentos. Al ajustar las propiedades superior, derecha, inferior e izquierda, puede compensar horizontal y verticalmente con respecto al origen para lograr un posicionamiento preciso de los elementos.
CSS implementa un diseño de dos columnas.
// 左边定宽，右边自适应方案
float + margin，float + calc
/* 方案1 */
.left {
width: 120px;
float: left;
}
.right {
margin-left: 120px;
}
/* 方案2 */
.left {
width: 120px;
float: left;
}
.right {
width: calc(100% - 120px);
float: left;
}
diseño flexible
display: flex;
// 容器的6个属性：
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
flex-direction属性有4个值
row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。
https://blog.csdn.net/wwwjjjjj666/article/details/128033184
Lista de materiales y DOM
BOM (modelo de objetos del navegador) proporciona una interfaz para interactuar con la ventana del navegador, como el historial operativo del navegador, temporizadores, etc.
window.location.href = "https://www.example.com";
let screenWidth = window.screen.width;
let timer = setTimeout(function() {
console.log("Timer expired");
}, 5000);
DOM es una interfaz de JavaScript para manipular el contenido y la estructura de las páginas web. Puede agregar, eliminar, modificar y consultar elementos de la página web a través de DOM.
let element = document.getElementById("myElement");
element.innerHTML = "New content";
let newElement = document.createElement("div");
newElement.textContent = "Dynamic element";
document.body.appendChild(newElement);
Estabilización y aceleración
El principio de la función anti-vibración: fusionar los eventos que se activan con mucha frecuencia en una sola ejecución. Ejecutar la función de devolución de llamada solo una vez dentro del tiempo especificado. Si el evento se activa nuevamente dentro del tiempo especificado, el tiempo de ejecución de la función de devolución de llamada será reiniciarse en función de este momento.
Escenario aplicable:
verificación de la entrada de texto, enviar una solicitud AJAX para verificación después de ingresar texto continuamente, solo verificar una vez.
Escenario de envío de botones: evita el envío de múltiples botones, solo ejecuta el último
escenario de verificación del servidor enviado: requiere verificación de formulario la cooperación del servidor, solo ejecuta la última vez de un evento de entrada continuo, y la función de buscar palabras de asociación es similar al
principio de la función de limitación: cuando los eventos se activan con frecuencia, la devolución de llamada del evento solo se ejecutará dentro del tiempo especificado período, es decir, el intervalo entre eventos desencadenantes es mayor o igual que el tiempo especificado Se ejecutará la función de devolución de llamada. En resumen: los eventos se desencadenan a intervalos de un período de tiempo.
Escena aplicable:
Arrastrar y soltar escena: ejecútelo solo una vez dentro de un período de tiempo fijo para evitar cambios de posición del disparador de frecuencia ultraalta. La función de arrastrar y soltar de los elementos DOM realiza (mousemove)
escena de zoom: monitorea el cambio de tamaño del navegador
escena de desplazamiento: monitorea el evento de desplazamiento de desplazamiento para juzgar si se carga automáticamente más en la parte inferior de la página
escena de animación: evita problemas de rendimiento causados por la activación de animaciones múltiples veces en un corto periodo de tiempo
orden de burbuja
El flujo del evento se divide en tres fases: la fase de captura, la fase objetivo y la fase de burbujeo.
Fase de captura: el evento pasa desde el nodo principal más externo hasta que llega al nodo principal del elemento de destino. Durante la fase de captura, el evento pasa por el padre, el abuelo, etc., pero no se activa ningún controlador de eventos.
Fase de destino: el evento llega al elemento de destino, lo que activa el controlador de eventos en el elemento de destino. Si un evento tiene varios controladores vinculados al elemento de destino, se ejecutarán en el orden en que se agregaron.
Fase de burbuja: el evento surge desde el elemento de destino, pasa al nodo principal, hasta que pasa al nodo principal más externo o al nodo raíz. Durante la fase de propagación, el evento activa a su vez los controladores de eventos del nodo padre, nodo abuelo, etc.
Función de cookies
Una cookie son datos (normalmente cifrados) almacenados en el terminal local del usuario (lado del cliente) por el sitio web para identificar la identidad del usuario. Los datos de la cookie siempre se transportan
en la solicitud http de la misma fuente (incluso si no es necesaria), y se registrará entre el navegador y el servidor. Pasar
sessionStorage y localStorage de un lado a otro no enviará automáticamente los datos al servidor, sino que solo los guardará localmente.
Tamaño de almacenamiento:
el tamaño de los datos de la cookie no puede exceder los 4k.
Aunque sessionStorage y localStorage también tienen restricciones de tamaño de almacenamiento, son mucho más grandes que las cookies y pueden alcanzar 5 M o más
Tiempo de caducidad:
localStorage almacena datos persistentes y los datos no se perderán después de cerrar el navegador a menos que los datos se eliminen activamente.
Los datos de sessionStorage se eliminarán automáticamente la cookie después de que se cierre la ventana actual del navegador. El
tiempo de vencimiento de la cookie establecido seguirá siendo válido incluso si se cierra la ventana o el navegador.
Permisos de usuario en vue
Autoridad de interfaz
Después de que el usuario inicia sesión exitosamente, puede obtener un token, guardarlo e interceptarlo a través del interceptor de solicitudes axios. El encabezado de la solicitud debe llevar la
autoridad del menú del token y el backend regresa al menú.
Autoridad del botón
La autoridad del botón puede también ser juzgado por v-if
Patrón de publicación-suscripción:
Ventajas: Desacopla a los editores y suscriptores para que puedan cambiar de forma independiente. Mayor flexibilidad y mantenibilidad del código.
Desventaja: puede hacer que los editores publiquen mensajes en exceso, lo que provocará problemas de rendimiento. Los suscriptores necesitan lógica relacionada con la suscripción y la cancelación de la suscripción.
Escenario aplicable: cuando existe una relación de uno a muchos y el cambio de estado de un objeto necesita notificar a varios otros objetos, se puede utilizar el modo de publicación-suscripción.
La diferencia entre sincrónico y asincrónico
Sincronización: el navegador accede a la solicitud del servidor, el usuario puede ver la actualización de la página, reenviar la solicitud, esperar a que se complete la solicitud, la página se actualiza, aparece contenido nuevo, el usuario ve el contenido nuevo y continúa con el siguiente paso. Asíncrono : el navegador accede a la solicitud del servidor, el usuario opera
normalmente, el backend del navegador realiza la solicitud. Una vez completada la solicitud, la página no se actualizará, aparecerá nuevo contenido y el usuario verá el nuevo contenido. Las
operaciones asincrónicas comunes incluyen solicitudes de red (Ajax), temporizadores (setTimeout, setInterval), procesamiento de eventos, etc. en. En estas operaciones asincrónicas, la ejecución de la tarea no bloqueará otras partes del programa, sino que se realizará en segundo plano. Cuando se complete la tarea, se notificará al programa para que continúe con el siguiente paso a través de una función o evento de devolución de llamada. .
Resumen: la operación sincrónica consiste en ejecutar tareas en secuencia; la operación asincrónica consiste en ejecutar tareas a través de funciones de devolución de llamada o activadores de eventos, que no bloquearán la ejecución del programa y mejorarán la concurrencia y la capacidad de respuesta del programa. En el desarrollo real, las operaciones asincrónicas generalmente se utilizan para procesar operaciones y tareas que requieren mucho tiempo y deben esperar resultados para mejorar el rendimiento del programa y la experiencia del usuario.
La diferencia entre websocket y ajax
Lo que tienen en común: Tanto Ajax como websocket son herramientas para la comunicación de datos front-end y back-end;
1. Diferentes ciclos de vida.
Websocket es una conexión a largo plazo y la sesión siempre se mantiene.
Ajax es una conexión corta y el remitente se desconectará después de recibirla.
2. Ámbito de uso
websocket es adecuado para datos de interacción en tiempo real entre el front-end y el back-end.
Ajax son datos interactivos que no son en tiempo real.
3. El
websocket iniciador es el impulso mutuo entre el servidor y el cliente.
Ajax lo inicia el cliente.
La diferencia entre axios y ajax.
Axios es una encapsulación de la tecnología ajax a través de promesas, al igual que jQuery implementa la encapsulación ajax.
En pocas palabras: la tecnología ajax realiza una actualización parcial de los datos de las páginas web y axios realiza la encapsulación de ajax.
Ajax es un término general para tecnología, basado en el desarrollo nativo de XHR, ya existe una alternativa para buscar.
fetch es una API nativa para solicitudes de red y admite Promise API, pero sus funciones son relativamente simples en algunos aspectos y debe encapsularse para manejar errores, tiempos de espera, etc.
La diferencia entre árbitro y árbitros.
ref actúa sobre los componentes: obtiene información sobre los subcomponentes
this.$refs obtiene información sobre los subcomponentes
div centrado horizontal y verticalmente
/** 1 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
/** 2 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/** 3 **/
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
/** 4 **/
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
método de centrado horizontal
El elemento es un elemento en línea, configure el elemento principal text-align:center
Si el ancho del elemento es fijo, puede configurar los márgenes izquierdo y derecho en automático;
posicionamiento y movimiento absolutos: absoluto + transformación
use el diseño de caja flexible, especifique el justificar el atributo de contenido como centro y
configurar la visualización en tabulación -celda
El método de centrado vertical.
Establezca el modo de visualización en tabla, muestre: celda de tabla y configure la alineación vertical: el medio
usa diseño flexible, configúrelo en align-item:
establezca abajo: 0, arriba: 0 en el posicionamiento absoluto central y establezca el margen:
posicionamiento absoluto automático Establecer parte superior: 50 % cuando la altura se fija en el medio y el valor del margen superior es un valor negativo de la mitad de la altura. El
texto está centrado verticalmente
. Establezca la altura de línea en el valor de altura. Su alineación vertical es de media a lograr el centrado vertical
El papel del $nexttick de vue
nextTick nos permite ejecutar una devolución de llamada retrasada después del siguiente ciclo de actualización de DOM para obtener el DOM actualizado
La principal diferencia entre vue2 y vue3 radica en los siguientes puntos:
1. Diferentes ganchos de funciones del ciclo de vida
2. El principio del enlace de datos bidireccional es diferente.
3. Definir variables y métodos son diferentes.
4. El uso de instrucciones y espacios es diferente.
5. Diferentes tipos de API
API de opción Vue2 (diferentes atributos separados en el código: datos, calculados, métodos, etc.)
API combinada de Vue3 (use métodos para separar, lo cual es más conveniente y ordenado)
6. Si se admite la fragmentación,
vue3 puede tener múltiples nodos raíz
7. Los parámetros pasados entre padre e hijo son diferentes.
8. Algunas configuraciones en el archivo main.js son diferentes.
La diferencia entre ref y reactivo de vue3
ref
ref es lo mismo que reactivo
: crea un objeto reactivo.
Diferente:
reactivo debe aceptar un parámetro de entrada en forma de objeto, mientras que ref puede tener la forma de un objeto o un valor único.
La lectura/asignación es diferente, ref debe leer el valor del atributo .value
ref tiene un problema asincrónico
toRef y toRefs:
toRefs solo generará una referencia para la propiedad contenida en el objeto fuente y convertirá el objeto en un objeto normal sin perder referencia a la fuente El enlace de respuesta del objeto, es decir, modificando el valor del atributo del objeto fuente, también se modificará el valor del atributo correspondiente (ref) del nuevo objeto ordinario generado, y viceversa.
toRef crea una referencia para una propiedad específica y también mantiene enlaces receptivos.
La diferencia entre reloj y computarizado.
Funcionalmente: calculado es un atributo calculado, observar es monitorear un cambio de valor y luego ejecutar la devolución de llamada correspondiente.
1. Si se debe llamar al caché: los atributos de los que dependen las funciones calculadas no han cambiado, por lo que al llamar a la función actual, se leerá del caché y el reloj ejecutará la devolución de llamada cada vez que cambie el valor monitoreado.
2. Ya sea para llamar a return: la función calculada debe usar return para regresar, y la función en watch no tiene que usar return.
3. Computed comenzará a monitorear cuando se cargue por primera vez de manera predeterminada, el reloj no monitoreará por primera vez de manera predeterminada. Si necesita monitorear por primera vez, agregue el atributo inmediato y configúrelo en verdadero (inmediato: verdadero)
4. Escenario de uso: calculado-----Cuando un atributo se ve afectado por múltiples atributos, utilice calculado-----liquidación de producto del carrito de compras. observar: cuando un dato afecta a varios datos, utilice el cuadro de búsqueda-----ver.
Resumen de la diferencia entre reloj y computado
Computado admite el almacenamiento en caché y solo se recalculará cuando cambien los datos dependientes; el reloj no admite el almacenamiento en caché, siempre que los datos monitoreados cambien, se activará la operación correspondiente
Computed no admite operaciones asincrónicas. Cuando hay operaciones asincrónicas en computed, es imposible monitorear los cambios de datos; watch admite operaciones asincrónicas.
El valor del atributo del atributo calculado es una función, y el valor de retorno de la función es el valor del atributo del atributo. Cada atributo en calculado puede establecer los métodos set y get. Los datos monitoreados por el reloj deben ser los datos declarados en los datos o los datos en los accesorios pasados por el componente principal. Cuando los datos cambian, se activa el oyente
Hable sobre su comprensión de ES6
ES6 (ECMAScript 2015) es la sexta versión principal de JavaScript e introduce muchas características de lenguaje nuevas y mejoras para mejorar la productividad de los desarrolladores y la calidad del código. A continuación se presentan algunas características importantes de ES6:
Alcance a nivel de bloque : las palabras clave let y const se introducen para permitir que las variables se declaren en el alcance a nivel de bloque, lo que resuelve los problemas de promoción de variables y contaminación del alcance.
Función de flecha : use flechas (=>) para definir funciones, lo que simplifica la escritura de funciones y las vincula automáticamente.
Cadena de plantilla : use comillas invertidas (`) para ajustar la cadena, y puede usar variables y expresiones en la cadena para lograr un empalme y formato de cadena más flexible.
Asignación desestructurante : A través de la sintaxis de asignación desestructurante, se pueden extraer valores de matrices u objetos y asignarlos a las variables correspondientes, lo que simplifica la operación de asignación de variables.
Parámetros predeterminados : las funciones pueden definir valores de parámetros predeterminados, lo que simplifica la operación de pasar parámetros cuando se llama a la función.
Operador de extensión : use tres puntos (...) para expandir matrices y objetos. Puede dividir una matriz u objeto en elementos independientes, o combinar varias matrices u objetos en uno.
Promise : El objeto Promise se introduce para manejar mejor las operaciones asincrónicas, resolver el problema del infierno de devolución de llamadas y proporcionar un modelo de programación asincrónica más claro.
Clases y modularidad : ES6 introduce el concepto de clases, las cuales se pueden definir usando la palabra clave class, logrando un método más cercano a la programación tradicional orientada a objetos. Al mismo tiempo, ES6 también proporciona soporte modular y los módulos se pueden importar y exportar utilizando la sintaxis de importación y exportación.
Modularidad: se introduce el concepto de modularización y los módulos se pueden importar y exportar utilizando la sintaxis de importación y exportación, lo que proporciona una mejor organización del código y reutilización de módulos.
Iteradores y generadores **: se introducen los conceptos de iteradores y generadores. Puede utilizar iteradores personalizados para atravesar colecciones de datos y utilizar funciones de generador para generar iteradores.
operador de tubería: La característica de la etapa de propuesta, que introduce el operador de canalización (|>), que puede pasar el resultado de una expresión como parámetro a la siguiente expresión, lo que simplifica la escritura de llamadas a funciones y cadenas de métodos.
Cómo crear un contexto de formato de bloque (contexto de formato de bloque), para qué sirve BFC
Para crear un contexto de formato de bloque (BFC), se puede aplicar el siguiente método:
1. Utilice el atributo flotante: establezca el atributo flotante del elemento en un valor distinto de ninguno para crear un BFC.
2. Utilice el atributo de desbordamiento: establezca el atributo de desbordamiento del elemento en un valor que no sea visible, como automático u oculto, para crear un BFC.
3. Utilice el atributo de visualización: establezca el atributo de visualización del elemento en un valor específico, como bloque en línea, celda de tabla, título de tabla, etc., para crear un BFC.
4. Utilice el atributo de posición: establezca el atributo de posición del elemento en absoluto, fijo, relativo o fijo para crear un BFC.
5. Utilice el atributo de contenido: establezca el atributo de contenido del elemento en diseño para crear un BFC (solo aplicable a algunos navegadores).
En IE, el diseño se puede activar mediante zoom:1
La diferencia entre el diseño BFC y el diseño de flujo de documentos ordinario es el diseño de flujo de documentos ordinario:
La altura de los elementos flotantes no será calculada por el padre.
Los elementos no flotantes cubrirán la posición de los elementos flotantes.
El margen se pasará al elemento padre.
Los márgenes por encima y por debajo de dos elementos adyacentes se superpondrán.
Resumen de los métodos de deduplicación de matrices
Método 1. Use ES6 Set para deduplicar (más comúnmente usado en ES6)
Método 2. Use for para anidar y luego empalme para deduplicar (más comúnmente usado en ES5)
Método 3. Use indexOf para deduplicar
método 4. Use sort() método de clasificación, luego recorra y compare elementos adyacentes de acuerdo con los resultados ordenados
Método 5, use el método incluye
6, use
el método hasOwnProperty 7, use
el método de filtro 8, […new Set(arr)]
Copia JS profunda y superficial
Copia superficial
1. Utilice el método Object.assign()
2. Utilice el operador de extensión
Copia profunda
- Utilice la recursividad para implementar funciones de copia profunda
- Utilice el método cloneDeep() de la biblioteca de terceros lodash
- Utilice JSON.parse(JSON.stringify()) para implementar una copia profunda
microtareas y macrotareas
proceso de microtarea.nextTick
promesa
Objeto.observe
MutationObserver
Script de tarea macro
setTimeout
setInterval
setRepresentación inmediata
de I/O
UI
El navegador ejecutará primero una tarea sincrónica y luego la tarea macro, y luego ejecutará la microtarea primero si hay código asincrónico
La diferencia entre renderizado del lado del servidor y renderizado del lado del cliente
Representación del lado del servidor: el árbol DOM se genera en el lado del servidor y luego se devuelve al front-end.
Representación del lado del cliente: el front-end va al back-end para recuperar datos y generar un árbol DOM.
Ventajas del renderizado del lado del servidor:
1. Trate de no ocupar los recursos del front-end, que lleva menos tiempo y es más rápido.
2. Favorece la optimización SEO, porque hay una página html completa en la parte posterior, por lo que es más fácil para los rastreadores rastrear información.
Desventajas de la renderización del lado del servidor:
1. No favorece la separación del front-end y el back-end y reduce la eficiencia del desarrollo.
2. El análisis de HTML acelera la interfaz, pero aumenta la presión sobre el servidor.
Ventajas de la renderización del lado del cliente:
1. Los extremos frontal y posterior están separados y la eficiencia de desarrollo es alta.
2. La experiencia del usuario es mejor. Convertimos el sitio web en un SPA (aplicación de una sola página) o parte del contenido en un SPA. Cuando los usuarios hacen clic, no habrá saltos frecuentes.
Desventajas de la renderización del lado del cliente:
1. La velocidad de respuesta del front-end es lenta, especialmente la primera pantalla, lo que resulta insoportable para los usuarios.
2. No favorece la optimización SEO, porque el rastreador no conoce SPA, por lo que solo registra una página.
¿Cuál es la diferencia entre ts y js?
1. TS amplía JS, introduce el concepto de tipo en JS y agrega muchas características nuevas.
2. El código TS debe ser compilado en JS mediante un compilador y luego ejecutado por un analizador JS.
3. TS es totalmente compatible con JS; en otras palabras, cualquier código JS se puede utilizar directamente como JS.
4. En comparación con JS, TS tiene escritura estática, sintaxis más estricta y funciones más potentes;
TS puede completar la inspección del código antes de ejecutarlo, lo que reduce la posibilidad de excepciones en tiempo de ejecución; el
código TS se puede compilar en cualquier versión del código JS, lo que puede resolver eficazmente el problema de compatibilidad de diferentes entornos operativos JS;
la misma función, TS The La cantidad de código es mayor que la de JS, pero debido a que la estructura del código de TS es más clara y los tipos de variables son más claros, TS es mucho mejor que JS en el mantenimiento del código posterior.
La diferencia entre reloj y watchEffect
Ambos pueden monitorear los cambios de atributos de datos.
Watch necesita especificar qué atributo monitorear
. watchEffect monitoreará automáticamente sus cambios de acuerdo con los atributos que contiene.
La diferencia entre reactivo y ref.
1. En términos de definición de datos:
ref se usa generalmente para definir datos de tipo básico
y reactivo se usa para definir: datos de tipo objeto (o matriz)
ref también se puede usar para definir datos de tipo objeto o matriz, que se convertirán en objetos proxy a través de reactivo internamente
. el aspecto principal:
referencia a través de Objeto La obtención y el conjunto de .defineProperty() implementan el proxy de datos.
Reactive usa Proxy para implementar el proxy de datos y manipula los datos dentro del objeto fuente a través de Reflect.
3. En términos de uso:
ref requiere .value para operar datos, pero no en plantilla.
reactivo no es necesario, valor