Inicio rápido vue3

Sugerencia: después de escribir el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha

---

prefacio

Este artículo son las notas que hice antes de aprender Vue3, además de algunos suplementos del sitio web oficial y otros lugares. A través de este artículo, puede comprender rápidamente las nuevas características de Vue3.

1. Cómo crear Vue3

Antes de crear un proyecto vue3, puede obtener información sobre la nueva generación de herramientas de construcción front-endRápidamente, aquí simplemente presentamos

1. Ventajas de Vite

1. Ventajas de los servicios de desarrollo basados ​​en ESM:

• No es necesario empaquetar el código fuente del proyecto
• Carga natural bajo demanda
• Puede aprovechar el almacenamiento en caché del navegador a nivel de archivo

2. Optimización del rendimiento de la compilación basada en Esbuild

3. Función de creación web incorporada, lista para usar:

después de comprender vite, usamos vite para crear proyectos. Si desea obtener más información sobre vite, puede visitar el sitio web oficial.

2. Crea un proyecto vue3

1. Aquí elegimos usar Vite para construir el proyecto

// npm
npm create vite@latest
//Yarn
yarn create vite
//PNPM
pnpm create vite

2. Crea una plantilla + selecciona una plantilla (aquí elegimos vue + javaScript)
para continuar:

 //进入项目文件夹
 cd vite-project        
 //初始化项目
  npm install             
 //运行项目
 npm run dev           

En este momento, el proyecto se ejecuta normalmente.

2. Primeros pasos con Vue3

1. API de composición

Vue3 propone la API de composición, que puede recopilar un código lógico y escribir un enlace por separado, y luego introducirlo, sin dividir datos y métodos como en vue2.

Aquí hay una cita del sitio web oficial :

La API de composición (API de composición) es una colección de API que nos permite escribir componentes de Vue usando funciones en lugar de declarar opciones
. Es un término general que cubre las API que: API reactivas: como ref() y
reactive(), nos permiten crear directamente estado reactivo, propiedades computadas y oyentes.

Enlaces de ciclo de vida: como onMounted() y onUnmounted(), nos permiten agregar lógica en varias etapas del ciclo de vida de los componentes.

Inyección de dependencias: como provide() e inject(), nos permiten aprovechar el sistema de inyección de dependencias de Vue cuando usamos API reactivas.

2.configuración

1. Comprensión: un nuevo elemento de configuración en Vue3.0, el valor es una función.
2. la configuración es la "etapa de rendimiento" de todas las API de composición (API de composición).
3. Los componentes utilizados en los componentes: datos, métodos, etc., deben configurarse en la configuración.

(1) La secuencia de ejecución de
la configuración se ejecuta antes de Crear y se crea, y esto en ella se imprime como indefinido.

(2) Parámetros aceptados por la configuración

configuración (accesorios, contexto)

props: Recibe el valor pasado por el componente padre.
contexto: objeto de contexto, utilizado para reemplazar las propiedades accesibles por el método anterior este

attrs: el valor es un objeto, que incluye: atributos pasados ​​desde fuera del componente pero no declarados en la configuración de props, equivalente a this.$attrs.

slots: contenido del slot recibido, equivalente a this.$slots.

emit: una función que distribuye eventos personalizados, equivalente a this.$emit.

(3) la configuración del valor de retorno de configuración
devuelve un objeto, los datos en este objeto se pueden usar directamente en la plantilla, y el valor devuelto en la configuración también se puede obtener a través de this.xxx en el elemento de configuración de datos

Tres, función ref y función reactiva.

Los datos que escribimos antes no son datos de respuesta. Podemos definir datos de respuesta a través de la función ref y reactiva, y las funciones deben introducirse antes de su uso.

1. función de referencia

● Función: definir datos de respuesta
● Sintaxis: const xxx = ref(initValue)
○ Cree un objeto de referencia (objeto de referencia, objeto ref para abreviar) que contenga datos de respuesta.
○ Operar datos en JS: xxx.value
○ Leer datos en plantilla: No es necesario .value, directamente: <div>{ {xxx}}</div>

Observación:

Los datos recibidos pueden ser: tipo básico o tipo objeto.
Tipos básicos de datos: la capacidad de respuesta aún se completa con la obtención y el establecimiento de Object.defineProperty(). Datos de tipo de objeto: internamente "solicita"
la nueva función en Vue3.0 - la función reactiva. Entonces, al definir datos receptivos, podemos usar directamente la función reactiva

<script lang="js">
//引入ref函数
import {
    
    defineComponent,ref} from "vue";

export default defineComponent({
    
    
  name:'App',
  data(){
    
    
    return{
    
    

    }
  },
  setup(props, context){
    
    
  //定义一个响应式数据
    let num = ref(0)
    //定义方法
    function  add(){
    
    
       console.log(1)
       //在setup中要拿到ref定义的数据需要.value
       num.value++
    }
    //把数据和方法返回出去，模板中才能使用
    return {
    
    num,add}
  }
})
</script>

<template>
  <div @click="add()">{
    
    {
    
    num}}</div>
</template>

2. función reactiva

● Función: Defina un tipo de objeto de datos reactivos (no lo use para tipos básicos, use la función ref)
● Sintaxis: const proxy object = reactivo (objeto de origen) recibe un objeto (o matriz) y devuelve un objeto proxy (Proxy's Objeto de instancia, denominado objeto proxy)
● Los datos reactivos definidos por reactivo son "nivel profundo".
● La implementación del proxy interno basado en ES6 opera en los datos internos del objeto de origen a través del objeto proxy.

<script lang="js">
//引入reactive
import {
    
    defineComponent,ref,reactive} from "vue";

export default defineComponent({
    
    
  name:'App',
  data(){
    
    
    return{
    
    

    }
  },
  setup(props, context){
    
    
    let objs = reactive({
    
    
       name:'ld',
       age:20
    })
    function  updata(){
    
    
    //读取reactive定义的数据的时候不需要.cvalue
       objs.age = 28
    }
    return {
    
    objs,updata}
  }
})
</script>

<template>
  <div @click="updata()">{
    
    {
    
    objs}}</div>
</template>

3. reactivo frente a ref.

● Comparación desde la perspectiva de la definición de datos:

ref: Se utiliza para definir datos de tipo básico.
reactivo: se utiliza para definir datos de tipo objeto (o matriz).
Observaciones: ref también se puede usar para definir datos de tipo objeto (o matriz), que se convertirán automáticamente en un objeto proxy a través de reactivos internos.

● Comparación desde la perspectiva del principio:

ref implementa la capacidad de respuesta (secuestro de datos) a través de get y set de Object.defineProperty(). ○
reactivo implementa la capacidad de respuesta (secuestro de datos) mediante el uso de Proxy y manipula los datos dentro del objeto de origen a través de Reflect.

● Comparación desde la perspectiva del uso:

Datos definidos por ref: se requiere .value para operar los datos, y no se requiere .value para lectura directa en la plantilla al leer datos.
Los datos definidos por reactivo: datos de operación y datos de lectura: tampoco necesitan .value.

4. Extensión: use ref para obtener dom en vue3

En vue2 podemos usar ref para obtener elementos, en vue3 podemos hacer lo mismo, pero la forma de usarlo es diferente.

//拿到单个DOM
<script lang="js">
import {
    
    defineComponent,ref,reactive} from "vue";
export default defineComponent({
    
    
  name:'App',
  setup(props, context){
    
    
    let item = ref(null)
    console.log(item)
    return {
    
    item}
  }
})
</script>

<template>
  <div ref="item" id="item">20</div>
</template>

//获取多个DOM

<script lang="js">
import {
    
    defineComponent,ref,nextTick} from "vue";
export default defineComponent({
    
    
  name:'App',
  setup(props, context){
    
    
    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
    
    
      myRef.value.push(el);
    };
    //下一个DOM 更新周期之后执行
    nextTick(() => {
    
    
      console.dir(myRef.value);
    });

    return {
    
    setRef}
  }
})
</script>

<template>
  <div v-for="(item,index) in 3" :ref="setRef">10</div>
</template>

Obtenga múltiples representaciones de referencia:

Cuatro, calculado y reloj

1. calculado

Consistente con el método de configuración en vue2

import {
    
    defineComponent,reactive,computed} from "vue";
...
setup(){
    
    
    let pers = reactive({
    
    
        name:'dlh',
        age:38
    })
    //计算属性——简写
    let compName = computed(()=>{
    
    
      return pers.name + '-' + pers.age
    })
    //计算属性——完整
    let compNames = computed({
    
    
      //读取
      get(){
    
    
        return pers.name + '-' + pers.age
      },
      //修改
      set(value){
    
    
        const nameArr = value.split('-')
        pers.name= nameArr[0]
        pers.age = nameArr[1]
      }
    })
    return {
    
    
      compName,compNames
    }
  }

2. reloj

Consistente con el método de configuración en vue2

reloj (datos, controlador, objeto) datos: controlador de
datos monitoreados (nuevo valor, valor anterior): función de devolución de llamada (valor después del cambio, valor antes del cambio) objeto: elemento de configuración opcional { inmediato: verdadero, profundo: verdadero }

import {
    
    watch,ref,reactive} from "vue";
...
setup(){
    
    
let num=ref(5),num2=ref(10)
let person = reactive({
    
    
       name:'5465',
       age:18
}
//情况一：监视ref定义的响应式数据
watch(num,(newValue,oldValue)=>{
    
    
      console.log('num变化了',newValue,oldValue)
    },{
    
    immediate:true})
}
//情况二：监视多个ref定义的响应式数据[数组方式]
watch([num,num2],(newValue,oldValue)=>{
    
    
      console.log('num或num2变化了',newValue,oldValue)
    })
/* 
情况三：监视reactive定义的响应式数据,无法正确获得oldValue,并且强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
    
    
	console.log('person变化了',newValue,oldValue)
},{
    
    immediate:true)
//情况四：监视reactive定义的响应式数据中的某个属性(参数以函数返回值的形式传递)
watch(()=>person.num,(newValue,oldValue)=>{
    
    
	console.log('person的job变化了',newValue,oldValue)
},{
    
    immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的多个数据[数组]
watch([()=>person.num,()=>person.age],(newValue,oldValue)=>{
    
    
	console.log('person的job变化了',newValue,oldValue)
},{
    
    immediate:true,deep:true})

3. función de efecto de reloj

En watch, es necesario especificar el atributo monitoreado y la devolución de llamada monitoreada, pero en watchEffect, no es necesario especificar qué atributo monitorear, y qué atributo se usa en la devolución de llamada monitoreada, luego qué atributo monitorear.

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    
    
    const num1 = sum.value
    const num2 = person.age
    console.log('watchEffect配置的回调执行了')
})

5. Ciclo de vida

El ciclo de vida debe importarse a través de la importación y usarse en la función de configuración, y el ciclo de vida de Vue3 es más rápido que el de Vue2.X.

Ver2.X	Ver 3
antes de crear	configuración()
creado	configuración()
antes del monte	onBeforeMount
montado	en Montado
antes de Actualizar	onBeforeUpdate
actualizado	onActualizado
antes de destruir	onBeforeUnmount
destruido	en Desmontado
error capturado	onErrorCaptured
'	onRenderTracked (nuevo)
'	onRenderTriggered (nuevo)

Se agregaron dos nuevos ganchos.

onRenderTriggered se llama cuando se rastrea la nueva representación del DOM virtual
onRenderTracked se llama cuando se activa la nueva representación del DOM virtual

Uso de ganchos de ciclo de vida en la configuración

import {
    
    defineComponent,onMounted} from "vue";
...
setup(){
    
    
    onMounted(()=>{
    
    
      console.log('Mounted ！！')
    })
  }

6. Función de gancho personalizado

La función de ganchos en vue3 es equivalente al mixin en vue2. La esencia de los ganchos es una función. Consiste
en extraer el código js de algunas funciones individuales del archivo y ponerlo en un archivo js separado. Su ventaja es que puede ser reutilizado Código para que la lógica en la configuración sea más clara y fácil de entender.

Ganchos encapsulados que monitorean la posición del mouse

// src/hooks/useMove.js
import {
    
    ref} from 'vue'
export default function(){
    
    
    //创建2个响应式变量来储存用户鼠标x轴和y轴的位置
    let pageX = ref(0) , pageY = ref(0)
    window.addEventListener('mousemove',(event)=>{
    
    
        pageX.value = event.pageX
        pageY.value = event.pageY
    })
    return {
    
    
        pageX,
        pageY
    }
}
//组件中引入使用

<script setup>
import useMove from "./hooks/useMove"
const {
    
      pageX, pageY} = useMove()
</script>
 
<template>
   <div>
      X: {
    
    {
    
    pageX }} Y:{
    
    {
    
     pageY }}
   </div>
</template>
 
<style scoped>
</style>

Ocho, proporcionar e inyectar

Implementan la comunicación entre los componentes ancestro y descendiente.

Los componentes principales tienen una opción de suministro para proporcionar datos y los componentes descendientes tienen una opción de inyección para comenzar a consumir estos datos.

//祖组件
import {
    
    defineComponent, provide, reactive} from "vue";
...
setup(){
    
    
    let hobby = reactive({
    
    name:'爱好',price:'无价'})
    provide('hobby',hobby)
  }
//后代组件
import {
    
    inject, ref} from 'vue'
...
setup(){
    
    
	const hobby = inject('hobby')
	return{
    
    
	   hobby
	}
}

9. Teletransporte - cualquier portal

Las plantillas html específicas se pueden entregar en cualquier lugar del Dom

Teleport tiene una propiedad requerida: para requiere prop, debe ser un selector de consulta válido o HTMLElement

 <teleport to='#portal'>
      <div v-if="isShow" class='doms'>
        Hello ! teleport
     </div>
</teleport>

A continuación, escriba un caso para saber claramente su uso.
Primero busque el archivo index.html

//在</body>前面添加<div id='portal'></div>
  <body>
    <div id="app"></div>
    <div id='portal'></div>
    <script type="module" src="/src/main.js"></script>
  </body>

en el componente hijo

<script lang="js">
import {
    
     ref } from 'vue'
export default {
    
    
  setup () {
    
    
    //控制隐藏的变量
    const isShow = ref(false)
    //定时器id
    let closeTime = null;
    //当用户点击弹出
    const showNotification = () => {
    
    
      isShow.value = true
      clearTimeout(closeTime)
      closeTime = setTimeout(() => {
    
    
        isShow.value = false
      }, 2000)
    }
    return {
    
    
      isShow,
      showNotification
    }
  }
}
</script>

<template>
  <div class='portals'>
    <button @click='showNotification'> 显示 </button>
    //需要传送的内容写在teleport里面并且to的地址为前面index文件中的id
 
    <teleport to='#portal'>
      <div v-if="isShow" class='doms'>
        Hello ! teleport
      </div>
    </teleport>
  </div>
</template>

<style scoped>
.doms {
    
    
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 120px;
  padding: 30px;
  color: #1a1a1a;
  background-color: #fff;
  border-radius: 10px;
}
</style>

Efecto de tiempo final: cuando el usuario hace clic, aparece un cuadro de aviso en la parte inferior izquierda y desaparece después de 2 segundos

10. Valoración de los datos de respuesta

1. isRef: comprueba si un valor es un objeto ref
2. isReactive: comprueba si un objeto es un proxy reactivo creado por reactivo
3. isReadonly: comprueba si un objeto es un proxy de solo lectura creado por readonly
4. isProxy: comprueba si un objeto es un proxy creado por el método eactive o readonly

11. Algunas otras API de composición

1. toRaw y markRaw

en bruto:

Función: Convierte un objeto reactivo generado por reactivo en un objeto normal.
Escenario de uso: se utiliza para leer el objeto común correspondiente al objeto receptivo. Todas las operaciones en este objeto común no generarán actualizaciones de la página.

import {
    
    defineComponent,reactive,toRaw} from "vue";
export default defineComponent({
    
    
  setup(){
    
    
    let obj = reactive({
    
    
      name:'段',
      age:20
    })
    let objToRaw =  toRaw(obj)
    console.log(obj,objToRaw)
    return{
    
    
      obj,
      objToRaw
    }
  }
})

En este momento, los segundos datos se convierten en datos ordinarios.

marcarRaw：

Rol: marque un objeto para que nunca vuelva a convertirse en un objeto receptivo.
Escenarios de aplicación:
1. Algunos valores no deben configurarse como receptivos, como bibliotecas complejas de terceros.
2. Al renderizar listas grandes con fuentes de datos inmutables, omitir las transformaciones reactivas puede mejorar el rendimiento.

2.shallowReactive 与 ref.superficial

superficialReactivo: solo maneja la capacidad de respuesta de las propiedades más externas en el objeto (es decir, la capacidad de respuesta superficial)

Escenario de uso: si hay una estructura de objeto con múltiples capas de anidamiento, nuestro requisito es solo modificar los datos más externos, por lo que no necesitamos convertir todas las estructuras anidadas internas en receptivas, solo necesitamos establecer el atributo más externo en sensible Esto puede mejorar el rendimiento.

superficialRef : solo maneja la capacidad de respuesta de los tipos de datos básicos, no la capacidad de respuesta de los objetos.

Escenario de uso: si hay datos de un objeto, la función posterior no modificará las propiedades en el objeto, pero generará un nuevo objeto para reemplazarlo, entonces puede usarlo

3. solo lectura 和 superficial Solo lectura

readonly : Hace que los datos reactivos sean de solo lectura (solo lectura profunda).

Cada atributo de la capa interna se establece en solo lectura y se informará un error si se realiza la operación de modificación.

"shallowReadonly": haga que los datos receptivos sean de solo lectura (solo lectura superficial).

Si es poco profundo, solo apunta a la capa más externa y no se informará ningún error al modificar la capa interna

Escenario de aplicación: use cuando los datos no quieran modificarse, elija api según diferentes grados

12. Cambios en la API global

Hay muchas API y configuraciones globales en Vue 2, y se han realizado algunos ajustes a estas API en Vue3:

API global 2.x (Vue)	API de instancia 3.x (aplicación)
Vue.config.xxxx	aplicación.config.xxxx
Vue.config.productionTip	eliminar
Vue.componente	aplicación.componente
Directiva.view	directiva de aplicación
Vue.mixin	app.mixin
Vue.use	app.uso
Vue.prototipo	app.config.globalProperties

Por ejemplo, monte $api en el prototipo.

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import API from '@/api/api';

const app =  createApp(App)
app.config.globalProperties.$API = API;
app.mount('#app')

Resumir

Lo anterior es de lo que quiero hablar hoy. Este artículo solo presenta brevemente algunas características en vue3. Para más conocimiento, puede ir al documento oficial. Espero que esta nota pueda ayudarlo.