Resumen de las nuevas características de Vue3.x y comparación con vue2.x

1. La diferencia entre Vue3.x y Vue2.x

1. La diferencia entre OptionsApi y CompositionApi

Nota: Aún puede usar el método de escritura Api opcional de vue2 en Vue3.x, pero le recomiendo que elija el método de escritura Api compositivo más reciente.

OptionsApi - Vue2.x - Option Api
1. El grado de libertad está limitado y el código debe estar escrito de acuerdo con las regulaciones, como accesorios, métodos, datos, computado, reloj, cada uno realizando sus propias funciones y sin cruce -borde está permitido 2. El contexto
debe usar esto
3. Vida El ciclo contiene beforeCreated() y Created()

ComposiciónApi - Vue3.x - Composición Api
1. Divida el código y permita la escritura libre en la función setup(), lo que reduce aún más el sentido de división del código
2. Sin esto, use el parámetro de contexto en la función setup() de manera uniforme, por The original this.getData => context.getData
3. El ciclo de vida se reemplaza por la entrada setup()
4. El propósito de Tree-Shaking es introducir lo que sea que se use, y solo las API utilizadas se empaquetan al final

Ejemplo:
contexto de contenido

2. Cambios en el ciclo de vida

En general, no hay muchos cambios. La configuración se usa para reemplazar la anterior antesCrear y creado. Los nombres de otros ciclos de vida han cambiado y las funciones no han cambiado.

3. La plantilla de plantilla admite múltiples etiquetas raíz

• ¡Ajuste desde la etiqueta de raíz única original para admitir múltiples etiquetas de raíz, reduzca el código inútil y aumente la libertad de código!
• La razón por la que se admiten varias etiquetas raíz es porque la capa inferior se cambia a un componente Fragment para envolver

//Vue2.x写法
<template>
	<div class="name">
		<p></p>
		<p></p>
	</div>
</template>

//Vue3.x
<template>
	<div class="name"></div>
	<div class="name2"></div>
	<div class="name3"></div>
</template>

4.Route obtiene la instancia de la página y la información de enrutamiento

Vue2.x

• Obtenga la instancia del enrutador a través de esto

export default{
    
    
  mounted() {
    
    
    this.getRouter();
  },
  methods: {
    
    
    getRouter() {
    
    
      console.log(this.$route);
      console.log(this.$router);
    },
  },
}

Vue3.x

• El primero es obtener la instancia del componente actual mediante el método getCurrentInstance

import {
    
     getCurrentInstance } from "vue";
export default {
    
    
  setup(props, context) {
    
    
    const {
    
     ctx } = getCurrentInstance();
    console.log(ctx.$router.currentRoute.value);
  },
};

• El segundo es a través de userRoute y userRouter

import {
    
     useRoute, useRouter } from "vue-router";
export default {
    
    
  setup(props, context) {
    
    
    const currRoute = useRoute();
    const currRouter = useRouter();

    console.log(currRoute);
    console.log(currRouter);
  },
};

5. Gestión del estado de Vuex

• La api no ha cambiado significativamente,
• La forma de crear una instancia ha cambiado, Vue2.x es una tienda nueva, Vue3.x es una tienda creada

//Vue2.x 中创建 store 实例
export default new Vuex.Store({
    
    
   // ... 
})

//Vue3.x
import Vuex from 'vuex'

export default Vuex.createStore({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    ADD (state) {
    
    
      state.count++
    }
  },
  actions: {
    
    
    add ({
     
      commit }) {
    
    
      commit('ADD')
    }
  },
  modules: {
    
    
  }
})

Usado en componentes Vue3.x - dos maneras

• la primera forma

<template>
  <div class="home">
    <p>{
    
    {
    
    count}}</p>
    <button @click="add">增加</button>
  </div>
</template>

<script>
import {
    
     computed } from 'vue'
import {
    
     useStore } from 'vuex'
export default {
    
    
  setup () {
    
    
    const store = useStore()
    const count = computed(() => store.state.count)

    const add = () => {
    
    
      store.dispatch('add')
    }
    
    return {
    
    
      count,
      add
    }
  }
}
</script>

• La segunda forma: obtener la tienda en el contexto del componente actual

import {
    
    getCurrentInstance} from 'vue'
// ...
const store = getCurrentInstance().ctx.$store

6. Funciones de objetos receptivos ref y reactivo

export default{
    
    
	setup(){
    
    
		const count=ref(0);
		const state=reactive({
    
    
			count:0
		})
	}
}

árbitro

• ref se inclina más a definir una sola variable, mientras que reactive se inclina más a definir un objeto.
• ref modifica los datos en forma de count.value=xxx, mientras que reactivo solo necesita state.count=xxx para usar
• ref es equivalente a reactivo encapsulado internamente
• ref se considera como una simple variable de enlace bidireccional toRef es para convertir objetos que no responden en receptivos
• La plantilla puede usar directamente { {count}} al tomar el valor

reactivo

• Se pueden usar varios métodos, como las propiedades calculadas, dentro de reactivo. Simplemente vincula los datos en dos direcciones.
• Es mejor usar toRefs para convertir los datos devueltos después de reactivo
• Cuando se mezcla con ref, puede usar isRef para juzgar el tipo

7. La diferencia entre el atributo de monitor watch y watchEffect

• watch necesita especificar los atributos (parámetros) para monitorear, y watchEffect se agrega en vue3.x, que no necesita especificar los atributos (parámetros) para monitorear, y recopila automáticamente los atributos de respuesta
• Watch puede obtener el valor nuevo y el valor anterior (valor antes de la actualización), pero watchEffect no puede obtenerlo
• watch especifica las dependencias al principio, no se ejecutará durante la inicialización y solo se ejecutará cuando cambien las dependencias,
  mientras que watchEffect se ejecutará una vez durante la inicialización para recopilar dependencias, y watchEffect se ejecutará nuevamente cuando cambien las dependencias
• Ni watch ni watchEffect pueden escuchar propiedades que no están enlazadas en dos sentidos
• watch puede monitorear directamente los objetos vinculados por ref y reactivo, pero watchEffect no puede (el valor de ref debe ser .value, y el valor de reactivo debe ser específico para los atributos internos), y solo se ejecutará por primera vez

Resumen: al comparar las diferencias entre las dos propiedades, utilícelo razonablemente de acuerdo con las necesidades específicas
1. Si necesita ejecutar cuando se inicializa el componente, use watchEffect
2. Si necesita obtener el valor nuevo y el valor anterior, use watch

8. Atributo calculado calculado

• El primer tipo no permite la modificación del valor y aparecerá una advertencia: No se permite modificar las propiedades calculadas
• La segunda permite modificar el valor
  

9. Cambios en el uso de puntales de pilares

• Usado en Vue2.x

exprot default {
    
    
    props: {
    
    
        title: String
    },
    mounted() {
    
    
        console.log(this.title);
    }
}

• Usado en Vue3.x

//通过setup中的内置参数进行调用,舍弃了之前的this调用方式
exprot default {
    
    
    props: {
    
    
        title: String
    },
    //props 组件传入的属性
    setup(props,context) {
    
    
        console.log(props.title) // 响应式
    }
}

10. Mezcla en Variaciones Mixins

• El patrón de mezcla en Vue2.x parece seguro en la superficie. Pero comparte código al fusionar objetos, lo que aumenta de manera invisible la vulnerabilidad del código, la fuente del código no está clara, el conflicto de los atributos del método, etc., y la capacidad de razonar sobre las funciones está encubierta, por lo que se convierte en un anti -patrón.

// vue页面中引入,该方法会将Mixins中的所有方法和属性一并引入
import mixin from 'mixin.js'
export default{
    
    
	data(){
    
    },
	mixins: [mixin]
}

• La parte más inteligente de la API de composición en Vue3.x es que permite a Vue compartir código basándose en las salvaguardas integradas en JavaScript nativo, como pasar variables a funciones y al sistema de módulos, ¡y solo usar las partes que necesitan ser llamadas !

// vue页面中引入
import mixin from 'mixin.js'
//第一种写法 - 利用ES6解构写法,只引用需要的部分
export default{
    
    
	setup(){
    
    
		const {
    
     count, plusOne, hello } = mixin()
		hello()
		console.log(count.value, plusOne.value)
	}
}

// 第二种写法 - 调用组件中的局部变量
export default {
    
    
  setup () {
    
    
    // 某个局部值的合成函数需要用到
    const myLocalVal = ref(0);
    // 它必须作为参数显式地传递
    const {
    
     ... } = mixin(myLocalVal);
  }
}

11. Directivas aduaneras

• Extraído de la directiva personalizada del documento oficial
• Como sugiere el nombre, los comandos personalizados son comandos creados por uno mismo, como v-html, v-bind, v-on, etc., para facilitar las llamadas.
  

12. Teletransportarse

• Documentación oficial explica Teleport
• Aléjese de la estructura DOM original, mueva los elementos DOM en la plantilla a otras posiciones, completamente controlados por los componentes internos de Vue
• Resuelva el problema de nivel de css entre componentes sin tener que lidiar con el problema del índice z
• Resolver el problema de posicionamiento de Modal, no afectado por el elemento padre
• Escenarios: comentarios, notificaciones, brindis,
  enlace modal amistoso: Introducción a Vue3 Teleport, léalo, es realmente fácil de usar

13. Valor de paso del componente padre-hijo

• Al devolver datos al componente principal, si usa un nombre personalizado, como backData, debe definirlo en emits ; de lo contrario, se informará una advertencia de opción de emits en la consola.

<template></template>
export default{
    
    
	emits:['backData'],
	setup(props,{
     
     emit}){
    
    
		function back(){
    
    
			emit('backData');
		}
	}
}

2. Pequeño conocimiento

1. ¿Toda la codificación basada en Vue3 usa codificación TypeScript?

1. TypeScript no es adecuado para proyectos comerciales con cambios comerciales frecuentes, porque la velocidad es lo más importante para este tipo de requisitos.
2. Para proyectos de herramientas/infraestructura, es mejor usar TypeScript.

2. Cuándo usar defineComponent

Elija el módulo apropiado de acuerdo con el lenguaje utilizado para escribir el código

1. Si usa TypeScript, debe usar defineComponent al exportar. Estos dos están emparejados. Para verificar el tipo correctamente, como se muestra en la Figura 1
2. Si se trata de codificación JavaScript, esta función no es necesaria, como se muestra en la Figura 2
   

3. La diferencia entre script y configuración de script

• Después de agregar la redacción después de la configuración, exporte propiedades o métodos a través de la exportación

<template>
  <button @click="inc">{
    
    {
    
     count }}</button>
</template>

<script setup>
  import {
    
     ref } from 'vue'

  const count = ref(0)
  const inc = () => count.value++
</script>

• Si no escribe después de la configuración, debe devolver el atributo o método, similar al retorno en data() en vue2.x

import {
    
     ref } from 'vue'

export default {
    
    
  setup() {
    
    
    const count = ref(0)
    const inc = () => count.value++

    return {
    
    
      count,
      inc,
    }
  },
}

4. Diferencia de respuesta entre Object.defineProperty (Vue2) y Proxy (Vue3)

Objeto Vue2.x.defineProperty

• Solo se pueden secuestrar las operaciones getter y setter de las propiedades del objeto. Cuando los datos cambian, es necesario atravesar todas las propiedades del objeto, como datos, accesorios, etc., lo que consume mucho
• No es compatible con Set/Map, class, array y otros tipos
• No se puede detectar una nueva adición o eliminación de atributos, no responde, necesita llamar manualmente a esto. $ establecer para actualizar
• Object.defineProperty no puede monitorear el cambio del subíndice de la matriz, lo que lleva a establecer directamente el valor de la matriz a través del subíndice de la matriz, y no puede responder en tiempo real, ni puede monitorear métodos como push.Estos métodos se reescriben en Vue para agregar setters

const data= {
    
    
    name: 'xiaoming',
    sex: '男'
}
// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(key => {
    
    
  let val = data[key]
  Object.defineProperty(data, key, {
    
    
    enumerable: true, // 该属性可被枚举
    configurable: true, // 该属性可以被删除以及属性描述符可以被改变
    get () {
    
    
      console.log(`属性值${
      
      data}当前值为${
      
      val}`)
      return val
    },
    set (newValue) {
    
    
      console.log(`监听到属性值${
      
      data}由${
      
      val}变为${
      
      newValue}`)
      val = newValue
    }
  })
});
 
data.name // 属性值name当前值为zhangsan
data.name = 'lisi' // 监听到属性值name由zhangsan变为lisi
data.age // 属性值age当前值为18
data.age = 25 // 监听到属性值age由18变为25

Proxy Vue3.x (ES6)

• puede secuestrar todo el objeto
• La nueva propiedad del objeto se puede responder en tiempo real y se puede detectar el cambio del subíndice de la matriz
• Debido a que Proxy es un nuevo atributo de ES6, algunos navegadores aún no lo admiten y solo es compatible con IE11

let obj = {
    
    
  a: 1,
  b: 2,
}
 
const p = new Proxy(obj, {
    
    
  get(target, key, value) {
    
    
    if (key === 'c') {
    
    
      return '我是自定义的一个结果';
    } else {
    
    
      return target[key];
    }
  },
 
  set(target, key, value) {
    
    
    if (value === 4) {
    
    
      target[key] = '我是自定义的一个结果';
    } else {
    
    
      target[key] = value;
    }
  }
})
 
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定义的一个结果
 
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
 
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定义的一个结果

5. configuración de variables de entorno env

• Cree nuevos .env.development y .env.production en el directorio raíz del proyecto
• Las variables de entorno personalizadas deben comenzar con VITE_APP
• Agregue el sufijo correspondiente a package.json
• Llame a import.meta.env.VITE_APP_BASE_API en la página;
  
  

console.log(import.meta.env);

6. Inicializar datos de datos

Vue2.x

Object.assign(this.$data, this.$options.data());

Vue3.x

 const initState = () => {
    
    
      return {
    
    
        a: 1
      }
    }
 const state = reactive(initState())
    
 const resetState = () => {
    
    
      Object.assign(state, initState())
    }

Otras lecturas

• Documento oficial de Vue3
• La diferencia entre Vue3 y Vue2

Si ya ha entendido las nuevas funciones de Vue3.x, le recomiendo que lea los siguientes artículos, para que pueda comenzar rápidamente con los proyectos de Vue3.

• Proyecto de inicialización de la serie Vue3 (1) y configuración de Vite 2.0
• Dependencias de instalación de la serie Vue3 (2) y experiencia inicial del marco de interfaz de usuario