Te llevará a explorar Vue 3.0 a mano | Equipo técnico de JD Logistics

1. Introducción

Ha pasado un tiempo desde el lanzamiento oficial de Vue 3.0. El 7 de febrero, el equipo de Vue anunció oficialmente que Vue 3 se ha convertido oficialmente en la nueva versión predeterminada. Los nuevos proyectos a los que he estado expuesto recientemente también se desarrollan utilizando Vue 3.0, por lo que es necesario resumir y aprender sobre él.

2. Introducción

Al principio, Vue era solo una biblioteca de tiempo de ejecución. Pero después de años de desarrollo, se ha convertido gradualmente en un marco con muchos subproyectos. La biblioteca central de Vue solo se enfoca en capas, que no solo es fácil de usar, sino también fácil de integrar con bibliotecas de terceros o proyectos existentes. Entonces, ¿qué nuevo rendimiento trae Vue 3.0?

Virtual Dom reescrito
Optimización de Plantillas Compiladas
Inicialización de componentes más eficiente
Velocidad de SSR aumentada en 2~3 veces
El rendimiento de la actualización mejoró entre 1,3 y 2 veces
Parece que Vue 3 ha mejorado mucho su rendimiento en comparación con 2. Como usuarios finales, echemos un vistazo a cómo se implementa el código.

3 nuevas características

3.1 API de composición

Vue 2 usa la API de opciones (API de estilo de opción), es decir, escribe códigos en datos, métodos, computado y reloj respectivamente. Si necesitamos agregar una lógica, debemos saltar repetidamente en estas opciones, lo que hace que los componentes sean difíciles de entender y leer. Vue 3 ha agregado una opción de configuración, que es el punto de entrada de la API combinada. Recopila código relacionado con la misma preocupación lógica, de modo que cuando necesitamos mantener un punto de función, no necesitamos preocuparnos por otra lógica.

Por ejemplo

<template>
  <div>{{number}}</div>
  <button @click="add">Add</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const number = ref(0)  //ref()函数使变量变为响应式
    const add = () => {
      number.value++   //使用ref创建的响应式变量需要加.value
    }
    return {  //返回的变量和方法可以在模板中直接使用
      number,  
      add
    }
  }
}
</script>

¿No parece poner todo el contenido de datos y métodos en la configuración, y no hay mucha diferencia? De hecho, también podemos dividir el contenido de la configuración en funciones independientes, y cada función es responsable de una función independiente. De esta forma, podemos reutilizar en diferentes componentes y simplificar el código, que es el poder de la API combinada.

3.2 API receptiva

referencia 3.2.1

En el código anterior, usamos ref para crear un objeto receptivo, que acepta tipos básicos js o tipos de referencia como parámetros, y devuelve un objeto RefImp que solo contiene el parámetro llamado valor. Si queremos usar el objeto receptivo en la función de configuración, debemos agregar .value. Pero cuando se representa en la plantilla, el valor interno se expande automáticamente, por lo que no es necesario agregar .value en la plantilla.

Ref se usa a menudo para tipos básicos. Si ref se pasa a un objeto, se convertirá en reactivo internamente para su procesamiento.

import { ref } from "vue";
const str = ref("");
const male = ref(true);

str.value = "new val";
console.log(str.value);  //new val

male.value = false;
console.log(male.value)  //fals

3.2.2 reactivo

La función reactiva solo acepta tipos de datos complejos, como objetos y matrices, y devuelve un objeto proxy. Reactivo puede ser recursivo a un nivel profundo, es decir, si se encuentra que el valor del atributo expandido es un tipo de referencia y está referenciado, se procesará recursivamente con reactivo. Y las propiedades se pueden modificar. Proxy es una función de proxy utilizada para crear un objeto en es6, que puede realizar la interceptación y personalización de operaciones básicas como agregar, eliminar, modificar y verificar el objeto de destino.

const p=new Proxy(target,handler) //target是proxy包装的目标对象，handler是一个以函数作为属性的对象

La simulación simple implementa reactivos para implementar la capacidad de respuesta:

      const obj={a:1,b:2}
      const p=new Proxy(obj,{
          get(target,key){
            console.log(`p的${key}属性被访问了！`)
            return Reflect.get(target,key)
          },
          set(target,key,value){
            console.log(`p的${key}属性被修改了！`)
            return Reflect.set(target,key,value)
          },
          deleteProperty(target,key){
            console.log(`p的${key}属性被删除了！`)
            return Reflect.deleteProperty(target,key)
          }
        })

3.2.3 a Refs

A través de la introducción anterior, ya sabemos que ref generalmente se usa para crear un enlace bidireccional de datos de tipo básico, y reactivo generalmente se usa para crear un enlace bidireccional de tipo de datos de referencia. Además, ref también puede crear enlaces bidireccionales de tipos complejos, mientras que reactivo no puede representar tipos básicos. Veamos un ejemplo:

<template>
  <div>{{user.name}}</div>
  <div>{{user.age}}</div>
  <div>{{user.sex}}</div>
  <button @click="changeInfo">更改个人信息</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const user = ref({name:'张三',age:'18',sex:'男'})  
    const changeInfo = () => {
      user.name.value='李四'
      user.age=20
      user.sex='女'
    }
    return {  
       user
    }
  }
}
</script>

En el código anterior, nos vinculamos a la página usando user.name, user.age, lo que parece muy engorroso de escribir. ¿Podemos deconstruir al usuario y usarlo directamente en la plantilla? La respuesta es no, hacerlo hará que el usuario pierda capacidad de respuesta. Pero al usar toRefs, puede usar los datos desestructurados directamente. toRefs se utiliza para convertir un objeto reactivo en un objeto normal cuyas propiedades son todas objetos ref. El uso específico es el siguiente:

<template>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{sex}}</div>
  <button @click="changeInfo">更改个人信息</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const user = ref({name:'张三',age:'18',sex:'男'})  
    const changeInfo = () => {
      user.name.value='李四'
      user.age=20
      user.sex='女'
    }
    return {  
       ...toRefs(user)  //使用toRefs
    }
  }
}

3.3 Escucha receptiva

La función de vigilancia se utiliza para escuchar una fuente de datos específica y realizar efectos secundarios en la función de devolución de llamada. El valor predeterminado es perezoso, lo que significa que la devolución de llamada solo se ejecuta cuando cambian los datos de la fuente de escucha.

watch(source,callback,[options])

fuente: puede admitir cadena, objeto, función, matriz; se usa para especificar la variable de respuesta que se escuchará
devolución de llamada: la función de devolución de llamada para ejecutar
opciones: opcional, soporte profundo, inmediato y enrasado

Uso de escuchar una sola fuente de datos:

import { reactive, ref, watch } from "vue";

const state = reactive({
  number:0,
  id:'01'
});
//侦听reative对象
watch(
  () => state.number,
  (newvalue, oldvalue) => {
    console.log(newvalue, oldvalue); //1 0
  }
);
state.number++;

const count = ref(0);
//侦听ref对象
watch(count, (count, prevCount) => {
  console.log(count, prevCount, "watch"); //2 0
});
count.value = 2

Uso de escuchar múltiples fuentes de datos:

import { reactive, ref, watch } from "vue";


const state = reactive({
  number:0,
  id:'01'
});
const count = ref(0);
watch([count,()=>{state.number}],([curcount,precount],[curnumber,prenumber])=>{
  console.log(curcount,precount)  //2 0
  console.log(curnumber,prenumber) //1 0
})
state.number++
count.value=2

Para objetos de referencia anidados de varios niveles, puede usar {deep:true} para habilitar el monitoreo profundo. De lo contrario, solo se pueden monitorear los cambios de datos de la capa externa. Como se mencionó anteriormente, la función de devolución de llamada del reloj en borrado por defecto es perezosa y solo se ejecutará cuando cambien los datos de monitoreo. Cuando se configura {inmediato: verdadero}, la función de devolución de llamada se puede ejecutar de inmediato.

3.4 Ciclo de vida

Hay 8 funciones de ciclo de vida en Vue2:

antes de crear
creado
antes del monte
montado
antes de Actualizar
actualizado
antes de destruir
destruido

En vue3, se agrega una nueva función de ciclo de vida de configuración. El tiempo de ejecución de la configuración es anterior a la función de vida beforeCreate, por lo que la instancia no se puede obtener a través de esta en esta función; al mismo tiempo, para unificar el nombre, el beforeDestroy se renombra beforeUnmount, y el destruido se renombra como unmounted, por lo que vue3 tiene las siguientes funciones de ciclo de vida:

beforeCreate -> no requerido
creado -> no requerido
antes del montaje -> en el antes del montaje
montado -> en Montado
beforeUpdate -> onBeforeUpdate
actualizado -> en Actualizado
beforeUnmount -> onBeforeUnmount
desmontado -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
render Triggered -> onRender Triggered

4 Resumen

A través del resumen de los conocimientos anteriores, tengo una mayor comprensión de Vue 3, que básicamente puede cumplir con el desarrollo del proyecto. Para más cambios, puede consultar los documentos oficiales y leer el código fuente por sí mismo. Creo que Vue 3 puede brindarnos más experiencias nuevas.

Autor: JD Logística Yan Zhiting

Fuente: comunidad de desarrolladores de JD Cloud Ziqishuo Tech