Notas de estudio de Vue3

El proyecto que estoy tomando actualmente de la empresa es Vue2, pero estoy a punto de ponerme en contacto con el proyecto Vue3. Aprendamos Vue3

1.Vue 3

1.1 Introducción

El 18 de septiembre de 2020, Vue.js lanzó la versión 3.0, nombre en clave: One Piece (One Piece),
que tomó más de 2 años, más de 2600 presentaciones, más de 30 RFC, más de 600 relaciones públicas y 99 colaboradores.

1.2 Lo que trae Vue3

(1) Mejora del rendimiento

1. Tamaño del paquete reducido en un 41%

2. El renderizado inicial es un 55 % más rápido y el renderizado actualizado es un 133 % más rápido

3. Memoria reducida en un 54%

…

(2) Actualización del código fuente

1. Use Proxy en lugar de defineProperty para implementar la capacidad de respuesta

2. Reescribir la implementación de DOM virtual y Tree-Shaking

…

1.3 Adopte TypeScript

Vue3 puede admitir mejor TypeScript

1.4 Nuevas funciones

(1) API de composición (API de composición)

1. configuración de configuración
2. ref y reactivo
3. reloj y efecto de reloj
4. proporcionar e inyectar
...
(2) Nuevos componentes incorporados

1, Fragmento
2, Teletransporte
3, Suspenso

(3) Otros cambios

1. Nuevo enlace de ciclo de vida
2. La opción de datos siempre debe declararse como una función
3. Quitar la compatibilidad con keyCode como modificador v-on
...

2. Crea un proyecto Vue3

2.1 Crear con vue-cli

//查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//安装或者升级你的@vue/cli
npm install -g @vue/cli
//创建
vue create vue_test
//进入项目目录
cd vue_test
//启动
npm run serve

2.2 Usar vite para crear

1. ¿Qué es vite? — Una nueva generación de herramientas de construcción front-end.
Las ventajas son las siguientes:
1. En el entorno de desarrollo, no hay necesidad de operaciones de empaquetado y se puede iniciar en frío rápidamente.
2. Recarga en caliente ligera y rápida (HMR).
3. Compilación real bajo demanda, sin esperar a que se compile toda la aplicación.
Comparación entre la construcción tradicional y la construcción en vite Figura

1: Construcción tradicional

Figura 2: Construcción en vite

//创建工程
npm init vite-app <project-name>
// 进入工程目录
cd <project-name>
//安装依赖
npm install
// 运行
npm run dev

3. Análisis de contenido

1.principal.js

// 引入的不再是 Vue 构造函数了
// 引入的是名为 createApp 的工厂函数
import {
    
     createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象->app 类似Vue2中的 vm
// 但是 app 比 vm 更 “轻”
// app上挂载的方法 比 vm 少很多 
createApp(App).mount('#app')

// app上的方法
// mount 挂载 组件到页面中
// unmount 卸载 组件在页面中

Comparación de Vue 2

import Vue from 'vue'
import App from './App.vue'
new Vue({
    
    
  render: h => h(App),
}).$mount('#app')

2.App.view

<template>
<!-- Vue3 允许可以不包含根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

4. API de composición común

1.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 combinación).

(3) Los datos, métodos, etc. utilizados en el componente deben configurarse en la configuración.

(4) Dos valores de retorno de la función de configuración:

1. Si se devuelve un objeto, las propiedades y los métodos del objeto se pueden usar directamente en la plantilla. (¡Enfocar!)

// 直接在模板中调用名字即可，例如<h2>{
    
    {name}}</h2>
// 不考虑响应式写法
export default {
    
    
   name: 'App',
   setup(){
    
    
     let name = 'LHD'
     let age = 19
     function speak(){
    
    
       alert('你好鸭！')
     }
     return{
    
    
       name,
       age,
       speak
     }
   }
 }

2. Si se devuelve una función de renderizado: puede personalizar el contenido de renderizado. (aprender)

import {
    
    h} from 'vue'
return ()=>h('h1','你好鸭！')

(5) Notas:

1. Intenta no mezclarlo con la configuración de Vue2.x

• Se puede acceder a las propiedades y métodos en la configuración en la configuración de Vue2.x (datos, métodos, calculados...).
• Pero no se puede acceder a la configuración de Vue2.x (datos, métodos, computados...) en la configuración.
• Si hay nombres duplicados, la configuración tiene prioridad.

2. La configuración no puede ser una función asíncrona, porque el valor devuelto ya no es el objeto devuelto, sino una promesa, y la plantilla no puede ver las propiedades en el objeto devuelto. (También puede devolver una instancia de Promise más tarde, pero requiere la cooperación de Suspense y componentes asincrónicos)

función 2.ref

1. Función: definir un dato sensible
2. Gramática:const xxx = ref(initValue)

• Cree un objeto de referencia (objeto de referencia, objeto ref para abreviar) que contenga datos de respuesta.
• Manipulación de datos en JS:xxx.value
• Leer datos en la plantilla: sin necesidad de .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 Object.defineProperty()completa con get y set.
• Datos de tipo de objeto: internamente "solicita" una nueva función en Vue3.0: la función reactiva.

// 示例，执行changeInfo函数修改信息，响应式数据
import {
    
    ref} from 'vue'
export default {
    
    
	name: 'App',
  	setup(){
    
    
    	let name = ref('LHD')
    	let age = ref(19)
    	let job = ref({
    
    
    	  type:'前端工程师',
    	  salary:'15k'
    	})
    	function changeInfo(){
    
    
    	  name.value = 'LTY',
    	  age.value = '23',
    	  job.value.type = '搬砖工程师',
    	  job.value.salary = '18k'
    	}
    	return{
    
    
    	  name,
    	  age,
    	  job,
    	  changeInfo
    	}
	}
}

3. función reactiva

• Rol: defina un tipo de objeto de datos receptivos (no lo use para tipos básicos, use la función ref)
• Sintaxis: const 代理对象=reactive(源对象)recibe un objeto (o matriz) y devuelve un objeto proxy (el objeto de instancia de Proxy, denominado objeto proxy)
• Los datos reactivos definidos por reactivo son "profundos".
• La Proxyimplementación y los datos internos del objeto de origen se manipulan a través del objeto proxy.

// 先引入reactive
import {
    
    reactive} from 'vue'
// 2的示例，setup函数中改成这样
let person = reactive({
    
    
	name:'LTY',
  	age:'23',
  	job:{
    
    
    	type:'工程师',
    	salary:'20k'
  	},
  	hobby:['Study','Play']
})
function changeInfo(){
    
    
	person.name = 'DHL',
  	person.age = '20',
  	person.job.type = '搬砖工程师',
  	person.job.salary = '10k',
  	person.hobby[1] = 'fly'
}
return{
    
    
	person,
  	changeInfo
}

4. Principio de respuesta en Vue3.0

4.1 Capacidad de respuesta de vue2.x

Principio de implementación:

• Tipo de objeto: Object.defineProperty()Interceptar (secuestro de datos) mediante la lectura y modificación de atributos.
• Tipo de matriz: la intercepción se logra anulando una serie de métodos para actualizar la matriz. (El método de cambio de la matriz está envuelto).

Object.defineProperty(data, 'count', {
    
    
    get () {
    
    }, 
    set () {
    
    }
})

Hay un problema:

1. Al agregar o eliminar atributos, la interfaz no se actualizará.
2. Modifique la matriz directamente a través del subíndice y la interfaz no se actualizará automáticamente.

4.2 Capacidad de respuesta de Vue3.0

Principio de realización:

1. A través de Proxy (proxy): Interceptar el cambio de cualquier atributo en el objeto, incluyendo: leer y escribir valores de atributos, agregar atributos, eliminar atributos, etc.

2. A través de Reflect (reflexión): operar sobre las propiedades del objeto de origen.

Simule Vue3 para lograr la capacidad de respuesta

let person = {
    
    
    name:"李四",
    age:18,
}
// 构造器必须有两个参数
// 参数一：要代理的对象
// 参数二：Proxy检测对象方法的配置
// 神奇的是 Proxy代理对象后 get set 什么都没写 就能检测到对象的增删改查
const p = new Proxy(person,{
    
    })

// 以下为简化原理
// 但是Vue3没有这么写 太low了
const p = new Proxy(person,{
    
    
    // target 为源对象  propName 为被get的成员变量
    get(target,propName){
    
    
        console.log(`有人读取了p身上的${
      
      propName}属性`)
        return target[propName]
    },
    
    // value 为更改后的值
    // 修改或追加属性是 都会调用 set  理解： 从 undefined -> value 也是一种set
    set(target,propName,value){
    
    
        // 响应式操作可在此进行
        console.log(`有人修改了p身上的${
      
      propName}属性`)
        target[propName] = value
    },
    
    deleteProperty(target,propName){
    
    
        console.log(`有人删除了p身上的${
      
      propName}属性`)
        return delete target[propName]
    }
})

/* 插播一个小知识点
        .不能将数字作为对象的属性名，[1]可以
        .运算符可以将关键字作为属性添加，[]运算符不可以
        .运算符不能调用字符串变量,["on"+type]可以
*/



// 隆重介绍 Reflect
let obj = {
    
    a:1,b:2}

// 以下两种方法均可从obj 读取 数据
obj.a
Reflect.get(obj,'a')

// 以下两种方法均可从obj 修改 数据
obj.a = 666
Reflect.set(obj,'a',666)

// 以下两种方法均可从obj 删除 数据
delete obj.a
Reflect.deleteProperty(obj,'a')

// ECMA 语法规范组织 正在将 Object上的API移植到Reflect

// defineProperty() 有返回值 true false

// 不能重复定义属性 重复定义抛出异常
// 直接抛出异常对封装框架不友好 需要 try catch
Object.defineProperty()

// 可重复定义属性 重复定义返回 false
Reflect.defineProperty()

El prototipo del principio de implementación de Vue3

let person = {
    
    
    name:"李四",
    age:18,
}

// 使用反射操作
const p = new Proxy(person,{
    
    
    get(target,propName){
    
    
        console.log(`有人读取了p身上的${
      
      propName}属性`)
        return Reflect.get(target,propName)
    },set 
    set(target,propName,value){
    
    
        console.log(`有人修改了p身上的${
      
      propName}属性`)
        Reflect.set(target,propName,value)
    },
    deleteProperty(target,propName){
    
    
        console.log(`有人删除了p身上的${
      
      propName}属性`)
        return Reflect.deleteProperty(target,propName)
    }
})

5. reactivo vs ref

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.

Desde la perspectiva de la comparación de principios:

• ref Object.defineProperty()implementa la capacidad de respuesta (secuestro de datos) a través de get y set.
• Reactive Proxyimplementa la capacidad de respuesta (secuestro de datos) al usarlo y manipula los datos dentro del objeto de origen a través de Reflect.

Desde el punto de vista 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.

6. Dos puntos de atención para la configuración

1. Tiempo de ejecución de la configuración

• Ejecutado una vez antes de beforeCreate, esto no está definido.
• Llamar a This en la configuración antes del primer ciclo de vida de Vue es inútil

2. Parámetros de configuración

1. accesorios: el valor es un objeto, que incluye: las propiedades pasadas desde fuera del componente y recibidas por la declaración interna del componente.
2. contexto: objeto de contexto

• 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 de slot recibido, equivalente a this.$slots.
• emit: una función que envía eventos personalizados, equivalente a this.$emit.

7. Propiedades calculadas y monitoreo

1 función calculada

• De acuerdo con la función de configuración calculada en Vue2.x
• fraseología

import {
    
    computed} from 'vue'

setup(){
    
    
    let person = reactive({
    
    
        firstName:"张",
        lastName:"三",
    })
    // 计算属性——简写 只读的情况
    let fullName = computed(()=>{
    
    
        return person.firstName + '-' + person.lastName
    })
    // 计算属性——完整 计算属性会被 修改的情况
    // 由于 person 为 proxy 对象 可直接新增属性进行响应式
    person.fullName = computed({
    
    
        get(){
    
    
            return person.firstName + '-' + person.lastName
        },
        set(value){
    
    
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

2. función de reloj

• Consistente con la función de configuración del reloj en Vue2.x
• Dos pequeños "pozos":

1. Al monitorear los datos de respuesta definidos por reactivo: oldValue no se puede obtener correctamente y el monitoreo profundo se habilita a la fuerza (la configuración profunda no es válida).
2. Al monitorear un determinado atributo en los datos receptivos definidos por reactivo: la configuración profunda es válida.
vue2

<script>
    // Vue2的写法
    export default {
    
    
        name: 'App',
        wacth:{
    
    
            // 简写方法 当 sum改变时执行
            sum(newValue,oldValue){
    
    
                console.log(newValue)
            },

            // 完整配置项方法
            sum:{
    
    
                // 开启深度监视
                deep:true,
                // handler为sum改变时执行的函数
                handler(newValue,oldValue){
    
    
                }，
                // immediate: true 选项，表示组件创建时立即执行
                immediate: true
            }
        }
    }
</script>

Ver 3

<script>
    // Vue3的写法
    import {
    
    watch,ref} from 'vue'
    export default {
    
    
        name: 'App',
        setup(){
    
    
            let sum = ref(0)
            
            watch(sum,(newValue,oldValue)=>{
    
    
                console.log('sum 改变了')
            })
        }
        
    }
</script>

El método de llamada del reloj es diferente en diferentes situaciones.

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    
    
    console.log('sum变化了',newValue,oldValue)
},{
    
    immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    
    
    console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
            // oldValue = newValue 这个是 Vue3的Bug
            若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
            若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
    
    
    console.log('person变化了',newValue,oldValue)
},{
    
    immediate:true,deep:false}) //此处的deep配置不再奏效 强制开启 deep

//情况四：监视reactive定义的响应式数据中的某个属性
// 不能 person.job 直接当作第一个参数 需要写成 函数形式
watch(()=>person.job,(newValue,oldValue)=>{
    
    
    console.log('person的job变化了',newValue,oldValue)
},{
    
    immediate:true,deep:true}) 

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

//特殊情况
// reactive中的对象 需要开启 Deep 不是 reactive 不默认开启
watch(()=>person.job,(newValue,oldValue)=>{
    
    
    console.log('person的job变化了',newValue,oldValue)
},{
    
    deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

El problema con el valor de referencia

let person = ref({
    
    
    name:"张三",
    age:19,
    job:{
    
    
        salary:{
    
    
            money:1000
        }
    }
})

// 不加value 为 ref 需要手动开启 deep
watch(person,(newValue,oldValue)=>{
    
    },{
    
    deep:true})

// 加value 为 reactive 强制开启 deep
watch(person.value,(newValue,oldValue)=>{
    
    })

3. función de efecto de reloj

• La rutina de vigilancia es: especificar no solo el atributo de monitoreo, sino también la devolución de llamada de monitoreo.
• La rutina de watchEffect es: no es necesario especificar qué atributo monitorear, qué atributo se usa en la devolución de llamada de monitoreo y luego qué atributo monitorear.

watchEffect es un poco como calculado:

• Pero computated presta atención al valor calculado (el valor de retorno de la función de devolución de llamada), por lo que se debe escribir el valor de retorno.
• Y watchEffect presta más atención al proceso (el cuerpo de la función de la función de devolución de llamada), por lo que no es necesario escribir el valor devuelto.

// watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    
    
    // 用到 sum 与 person 则会监视 sum 与 person
    // 智能监视 用谁判断谁 多层对象也可判断 （非常强大）
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

8. Ciclo de vida

1. Los ganchos del ciclo de vida en Vue2.x se pueden seguir usando en Vue3.0, pero se cambió el nombre de dos de ellos:

• beforeDestroy pasó a llamarse beforeUnmount
• destruido cambió su nombre a desmontado

2. Vue3.0 también proporciona un gancho de ciclo de vida en forma de API de composición, que corresponde al gancho en Vue2.x de la siguiente manera:

• beforeCreate===>instalar()
• creado===>configuración()
• beforeMount == = > onBeforeMount
• montado => en Montado
• beforeUpdate= == >onBeforeUpdate
• actualizado == >enActualizado
• beforeUnmount == >onBeforeUnmount
• desmontado ===>en Desmontado

9. Función de gancho personalizado

Similar a Vue2 minxin

• ¿Qué son los ganchos? —— Es esencialmente una función que encapsula la API de composición utilizada en la función de configuración.
• Similar a mixin en vue2.x.
• Ventajas de los ganchos personalizados: reutilización de código, lo que hace que la lógica en la configuración sea más clara y fácil de entender.

Por ejemplo:
1. Cree una nueva carpeta de enlaces en la carpeta src
2. Cree un nuevo usePoint.js

// usePoint.js
// 需要混入的功能放入一个函数中
export default = function(){
    
    
    let point = reactive({
    
    
        x:0,
        y:0,
    })

    function savePoint(event){
    
    
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }

    onMounted(()=>{
    
    
        window.addEventListener('click',savePoint)
    })
    onBeforeUnmount(()=>{
    
    
        window.removeEventListener('click',savePoint)
    })
    
    // 需要用到的数据返回
    return point
}

// 在其他 .vue 文件中的使用
import usePoint from '../hooks/usePoint'

const point = usePoint()

return {
    
    point}

10.toRef

• Función: crea un objeto ref cuyo valor apunta a un atributo en otro objeto.
• gramática:const name = toRef(person,'name')
• Aplicación: cuando desea proporcionar una propiedad en el objeto receptivo solo para uso externo.
• Extensión: toRefs tiene la misma función que toRef, pero se pueden crear múltiples objetos ref en lotes, sintaxis: toRefs(persona)

setup(){
    
    
    let person = reactive({
    
    
        a:"a",
        b:"b",
        c:"c",
        name:"王二",
    })
    
    
    
    return {
    
    
        // 改动后为引用数据类型
        a:toRef(person,'a'),
        b:toRef(person,'b'),
        // 同样为开辟新的 ref 原person未改变
        name:ref(name)
        // 此处为开拓新的内存赋值
        c:person.c,
        
        
        // toRefs 特别好用 简化语法
        // ES6 合并对象 toRefs返回值为对象 将每一个key都封装为 ref对象
        ...toRefs(person)
    }
}

5. Otras API de composición

1.shallowReactive 与 ref.superficial

• superficialReactivo: solo maneja la respuesta (respuesta superficial) de las propiedades más externas del objeto.
• superficialRef: solo maneja la respuesta de los tipos de datos básicos, no la respuesta de los objetos.

¿Cuándo usarlo?

• Si hay datos de un objeto, la estructura es relativamente profunda, pero solo cambia el atributo externo ===> superficialReactivo.
• Si hay datos de un objeto, las funciones subsiguientes no modificarán las propiedades de ese objeto, sino que generarán nuevos objetos para reemplazar ===> ref.superficial.

const person = shallowReactive({
    
    
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
     // b 改变 无响应式
            c:666 // c改变无响应式
        }
    }
})


const person = ref({
    
     // 内部调用 reactive 响应式存在
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
     // b 改变 无响应式
            c:666 // c改变无响应式
        }
    }
})

// 第一层次为响应式
const person = shallowRef({
    
     // person.value 变为 Object 响应式消失
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
     // b 改变 无响应式
            c:666 // c改变无响应式
        }
    }
})

2. solo lectura 与 superficial Solo lectura

• readonly: Hace que los datos reactivos sean de solo lectura (solo lectura profunda).
• "shallowReadonly": haga que los datos receptivos sean de solo lectura (solo lectura superficial).
• Escenario de aplicación: Cuando no se espera que se modifiquen los datos.

// 应用场景： 数据为其他组件传输 不希望使用者更改 在使用前使用readOnly覆盖
const person = reactive({
    
    
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
     // b 改变 无响应式
            c:666 // c改变无响应式
        }
    }
})

// 将person覆盖为 只读的形式
// 内部的全部数据均不可更改
person = readOnly(person)

// shallow 表示 只有浅层次不可更改
// hobby不可更改 但是 c 可以更改
person = shallowReadonly(person)

3. toRaw y markRaw

1, a crudo:

• 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.

2, marcar en bruto:

• Rol: marque un objeto para que nunca vuelva a convertirse en un objeto receptivo.

Escenario de aplicación:

• Algunos valores no deben establecerse como responsive, como bibliotecas complejas de terceros, etc.
• Omitir las transformaciones reactivas puede mejorar el rendimiento al representar listas grandes con fuentes de datos inmutables.

// 应用场景： 还原被 ref 与 reactive 操作的数据
const person = reactive({
    
    
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
     // b 改变 无响应式
            c:666 // c改变无响应式
        }
    }
})

console.log(toRow(person))
// 输出的为原始 Person 数据
let person = {
    
    
    hobby: ['抽烟', '喝酒', '烫头'],
    a:{
    
    
        b:{
    
    
            c:666
        }
    }
}

function addCar(){
    
    
    let car = {
    
    name:'奔驰', price:40}
    // 被markRaw修饰后 car 永远不会成为响应式数据了
    person.car = markRaw(car)
}
}

4. referencia personalizada

• Rol: Cree una referencia personalizada con control explícito sobre su seguimiento de dependencias y activación de actualizaciones.
• Para lograr el efecto antivibración:

<template>
<input type="text" v-model="keyword">
<h3>{
    
    {
    
    keyword}}</h3>
</template>

<script>
    import {
    
    ref,customRef} from 'vue'
    export default {
    
    
        name:'Demo',
        setup(){
    
    
            // let keyword = ref('hello') //使用Vue准备好的内置ref
            //自定义一个myRef
            function myRef(value,delay){
    
    
                let timer
                //通过customRef去实现自定义
                // track 通知get追踪数据
                // trigger 通知Vue重新渲染DOM 查看数据改变
                return customRef((track,trigger)=>{
    
    
                    return{
    
    
                        get(){
    
    
                            track() //告诉Vue这个value值是需要被“追踪”的
                            // 修改 value时会进更改
                            return value
                        },
                        set(newValue){
    
    
                            // 防抖效果
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
    
    
                                value = newValue
                                trigger() //告诉Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
    
    
                keyword
            }
        }
    }
</script>

5.proporcionar e inyectar

• Rol: Realizar la comunicación entre los componentes ancestro y descendiente
• Rutina: el componente principal tiene una opción de proporcionar para proporcionar datos, y los componentes descendientes tienen una opción de inyección para comenzar a usar los datos

Específicamente escrito:

1. En el componente ancestral:

setup(){
    
    
    ......
    let car = reactive({
    
    name:'奔驰',price:'40万'})
    provide('car',car) // 给自己的后代组件传递数据
    ......
}

2. En componentes descendientes:

setup(props,context){
    
    
    ......
    const car = inject('car') // 接收祖先组件传递的数据
    return {
    
    car}
    ......
}

6. Juicio de datos sensibles

• isRef: comprueba si un valor es un objeto ref
• isReactive: comprueba si un objeto es un proxy reactivo creado por reactivo
• isReadonly: comprueba si un objeto es un proxy de solo lectura creado por readonly
• isProxy: comprueba si un objeto es un proxy creado por un método reactivo o de solo lectura

6. Ventajas de la API de Composición

1. Problemas con la API de Opciones

En la API de opciones tradicional, si agrega o modifica un requisito, debe modificarlo en datos, métodos y computado, respectivamente.

2. Ventajas de la API de Composición

• Podemos organizar nuestro código y funciones de manera más elegante. Deje que el código de funciones relacionadas se organice en conjunto de una manera más ordenada.
• Puede usar la función Hook para empaquetar

7. Nuevos componentes

1. Fragmento

• En Vue2: los componentes deben tener una etiqueta raíz
• En Vue3: los componentes no pueden tener etiquetas raíz y se incluirán múltiples etiquetas en un elemento virtual Fragment internamente
• Beneficios: Reduzca los niveles de etiquetas, reduzca el uso de memoria

<template>
<!--Vue3支持无根标签实际上是 自动添加一层根Fragment在虚拟DOM中使用 在渲染真实DOM是会删除 提高渲染速度-->
<Fragment>
    <h3>hello</h3>
    <h3>hello</h3>
    <h3>hello</h3>
    <h3>hello</h3>
    </Fragment>
</template>

2.Teletransportarse

• ¿Qué es Teletransporte? —— Teleport es una tecnología que puede mover la estructura html de nuestro componente a una ubicación específica.

<!-- teleport包裹的Html不会在当前组件中渲染 会传送到 to 参数指定的位置 -->
<!-- to 支持的写法 #app body css选择器 html标签 -->
<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

3. Suspenso

• Procese contenido adicional mientras espera componentes asincrónicos, para que la aplicación tenga una mejor experiencia de usuario

Pasos para el uso:

1. Importar componentes de forma asíncrona

import {
    
    defineAsyncComponent} from 'vue'
// 异步/动态 引入组件
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

2. Utilice Suspenso para envolver componentes y configurar valores predeterminados y alternativos

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <!-- Suspense 内部存在两个插槽 -->
        <!-- default 当其中的数据准备完毕后进行加载 -->
        <!-- fallback 当default中的数据未准备完毕时展示 -->
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template

8. Otro

1. Transferencia API global

Vue 2.x tiene muchas API y configuraciones globales.

Por ejemplo: registrar componentes globales, registrar directivas globales, etc.

//注册全局组件
Vue.component('MyButton', {
    
    
  data: () => ({
    
    
    count: 0
  }),
  template: '<button @click="count++">Clicked {
    
    { count }} times.</button>'
})

//注册全局指令
Vue.directive('focus', {
    
    
  inserted: el => el.focus()
}

Estas API se han ajustado en Vue3.0:

Ajuste la API global, es decir: Vue.xxxa la instancia de la aplicación (app)

Vue3 puede identificar si ejecutar compilación o servicio, así que elimine config.production

2. Otros cambios

• La opción de datos siempre debe declararse como una función.
• Cambios de nombre de clase excesivos:
  1. Método de escritura Vue2.x

.v-enter,
.v-leave-to {
    
    
    opacity: 0;
}
.v-leave,
.v-enter-to {
    
    
    opacity: 1;
}

Método de escritura Vue3.x

.v-enter-from,
.v-leave-to {
    
    
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
    
    
  opacity: 1;
}

• Elimine keyCode como un modificador v-on y ya no admita config.keyCodes
• Elimine el modificador v-on.native
  para vincular eventos en el componente principal

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

Declarar eventos personalizados en subcomponentes

<script>
    export default {
    
    
        // 声明的事件为自定义事件 其余为原生事件
        emits: ['close']
    }
</script>

• quitar filtro

Filtros Si bien esto parece conveniente, requiere una sintaxis personalizada que rompa la suposición de que las expresiones entre llaves son "solo JavaScript", lo que no solo tiene un costo de aprendizaje, ¡sino también un costo de implementación! Se recomienda reemplazar los filtros con llamadas a métodos o propiedades calculadas.