Ver 3
El ciclo de vida de Vue2
- antes de crear
- crear
- beforeMount (antes del montaje)
- montado (después del montaje)
- beforeUpdate (antes de la actualización)
- Actualizado (actualizado)
- beforeDestroy (antes de la destrucción)
- destruido
Ciclo de vida de Vue3 y ganchos de ciclo de vida
- beforeCreate——configuración
- crear——configurar
- beforeMount (antes del montaje) - onBeforeMount
- montado (después del montaje) - onMounted
- beforeUpdate——onBeforeUpdate
- Actualizado (actualizado) - onUpdated
- beforeUnmount (antes de desmontar) - onBeforeUnmount
- desmontado——en Desmontado
- Según sea necesario, puede hacer referencia al enlace del ciclo de vida correspondiente en la importación en la página y luego usarlo directamente en la configuración
- Cuando el ciclo de vida combinado y el ciclo de vida del elemento de configuración se configuran juntos, se encuentra que el ciclo de vida combinado es un poco más rápido que el mismo nivel
Función de gancho personalizado
- Es esencialmente una función que encapsula la API de composición utilizada en la función de configuración
- Similar a mezclar en Vue2
- Los ganchos personalizados hacen que la lógica de la configuración sea más clara y fácil de entender
Del mismo modo, cree un nuevo js
- Encapsule el código en la configuración.
import {
ref,reactive, onMounted, onBeforeMount } from "vue";
//实现鼠标打点的hook
export default function activepoint() {
let ispoint = ref('ispoint')
let point = reactive({
x: 0,
y: 0,
});
function savepoint(event) {
console.log(event)
point.x = event.pageX;
point.y = event.pageY;
}
function changeispoint() {
ispoint.value = !ispoint.value
}
onMounted(() => {
window.addEventListener("click", savepoint);
});
onBeforeMount(() => {
window.removeEventListener("click", savepoint);
});
return {
point
};
}
en la página que necesita usar
- introducción de importación
import userPoint from "../utils/point";
- usar
setup() {
const point = userPoint();
return {
point };
},
aRef
- Cree un objeto ref cuyo valor apunte a una propiedad en otro objeto
- El siguiente código parece estar bien, pero pierde capacidad de respuesta
- Motivo: cuando regresa, en realidad define una nueva variable y recibe una cadena parant.name, es decir, reasigna la cadena Kilimanjaro a name
export default {
name: "Demo",
setup() {
let parant =reactive({
name: "乞力马扎罗",
sum:0,
job: {
a: 1,
b: 2,
},
})
return {
name: parant.name,
sum:parant.sum,
};
},
};
- Solución:
- Parámetro 1, qué objeto desea operar, parámetro 2, qué valor en el objeto desea operar
- No importa cuántas capas de objetos, el segundo parámetro es el valor que desea usar
return {
name: toRef(parant, "name"),
sum: toRef(parant, "sum"),
a: toRef(parant.job, "a"),
};
La diferencia entre toRef y ref
- Al devolver tanto los datos de origen como los valores en los datos de origen:
- toref es vincular el valor en los datos de origen. Los datos de origen seguirán los cambios
- La referencia no es el objeto de los datos de origen, sino el objeto de referencia de la referencia recién creada, lo que provocará la separación de datos.
Caso 1
<template>
<!-- VUE3组件中的模板结构可以没有根标签 -->
<div>{
{
parant}}</div>
<div>{
{
sum }}</div>
<button @click="sum++">sum++</button>
<div>{
{
b }}</div>
<button @click="b++">sum++</button>
</template>
<script>
import {
ref, reactive, onMounted, onBeforeMount, toRef } from "vue";
export default {
name: "Demo",
setup() {
let parant = reactive({
name: "乞力马扎罗",
sum: 0,
job: {
a: 1,
b: 2,
},
});
return {
parant,
name: toRef(parant, "name"),
sum: toRef(parant, "sum"), //参数1，想操作哪个对象，参数2，想操作对象里的哪个值
b: ref(parant.job.b),
};
},
};
</script>
<style>
</style>
toRefs, puede devolver múltiples
- torefs, puede crear múltiples objetos ref en lotes, pero solo puede crear la primera capa del objeto, no puede crear la capa profunda juntos
- Debido a que lo que se crea es un objeto, si desea usar la primera capa en el objeto, debe pasar es6's ...
Pero si desea utilizar el objeto en el objeto directamente en la página
- Método 1
- Lance una capa y úsela de una manera similar a job.a en la página
...toRefs(parant), //只给个想操作的对象即可
<div>{
{
job.a }}</div>
<button @click="job.a++">job.a++</button>
- Método 2
- Cuando se lanza un objeto, el objeto en el objeto se lanza directamente
...toRefs(parant.job), //只给个想操作的对象即可
Visualización de la imagen del código:
Otras API combinadas
superficialReactivo和superficialReferencia
superficialReactivo (superficial sensible)
- superficialReactivo solo maneja la capacidad de respuesta de las propiedades más externas del objeto (capacidad de respuesta superficial)
La diferencia entre ref superficial y ref.
- Cuando ref responde a un objeto, el reactivo se usará internamente para responder
- superficialRef solo responde a datos básicos y no utiliza reactivos internamente para responder
solo lectura 和 superficial Solo lectura
solo lectura (solo lectura profunda)
- readonly hace que los datos receptivos sean de solo lectura
- Proteja los datos de la modificación
setup() {
let parant2 = shallowReactive({
name: "乞力马扎罗",
sum: 0,
b: 2,
job: {
a: 1,
},
});
parant2 = readonly(parant2);
return {
parant2,
};
},
superficialReadonly (solo lectura superficial)
- Es hacer que la primera capa del objeto sea de solo lectura e inmodificable.
toRaw y markRaw
toRaw (conversión temporal)
- Convierta un objeto reactivo generado por reactivo en un objeto normal
- Tenga en cuenta que solo los datos reactivos definidos por reactivo se pueden convertir
- Función: se utiliza para leer el objeto común correspondiente al objeto receptivo. Todas las operaciones en este objeto común no causarán actualizaciones de la página.
markRaw (conversión permanente)
- Marca un objeto para que nunca vuelva a ser reactivo.
- Escenario: algunos valores no deben configurarse de manera receptiva, por ejemplo, bibliotecas complejas de terceros
- Omitir las transiciones reactivas puede mejorar el rendimiento al representar listas grandes con fuentes de datos inmutables
customRef (referencia personalizada)
- Cree una referencia personalizada y control de visualización sobre su seguimiento de información dependiente y activadores de actualización
