Vue3.0
-
Cambios en la organización del código fuente
-
Todo el código está escrito en TypeScript
-
Utilice Monorepo para administrar la estructura del proyecto
-
Todos los módulos funcionales se dividen en paquetes separados para el desarrollo, que se pueden desarrollar, probar y lanzar por separado
-
-
API de composición
El 90% de las nuevas API son compatibles con 2.X
-
Mejora del rendimiento
Mejore significativamente, reescriba el estilo de respuesta, use proxy, el rendimiento de la representación del lado del servidor se mejora 2-3 veces
-
Con rapidez
Soluciones para ejecutar proyectos directamente sin embalaje
Diferentes versiones de construcción
-
cjs
-
vue.cjs.js
-
vue.cjs.prod.js
-
-
global
-
vue.global.js
-
vue.global.prod.js
-
vue.runtime.global.js
-
vue.runtime.global.prod.js
-
-
navegador
-
vue.esm-browser.js
-
vue.esm-browser.prod.js
-
vue.runtime.esm-browser.js
-
vue.runtime.esm-browser.prod.js
-
-
empaquetadora
-
vue.esm-bundler.js
-
vue.runtime.esm-bundler.js
-
Mejora del rendimiento
-
Actualización del sistema receptivo
-
Optimización de la compilación
-
Optimización del volumen del código fuente
-
DefineProperty, el núcleo del sistema receptivo en Vue.js 2.x
-
Reescribe el sistema reactivo con el objeto Proxy en Vue.js 3.0
-
Puede monitorear atributos agregados dinámicamente
-
Puede monitorear atributos eliminados
-
Puede monitorear las propiedades de índice y longitud de la matriz
-
-
Vue.js 2.x optimiza el proceso de diff marcando el nodo raíz estático
-
En Vue.js 3.0, todos los nodos raíz estáticos están marcados y promocionados. Cuando se diferencian, solo se debe comparar el contenido del nodo dinámico
-
Fragmentos (actualizar el complemento de vetur)
-
Impulso estático
-
Bandera de parche
-
Controlador de eventos de caché
-
-
Optimizar el volumen de empaque
-
Algunas API poco comunes se han eliminado en Vue.js 3.0
- Por ejemplo: plantilla en línea, filtro, etc.
-
Apoyar el temblor de árboles
-
Revisión receptiva de Vue.3.0js
-
El objeto proxy implementa la supervisión de propiedades
-
Anidación de atributos de varios niveles, el siguiente nivel de atributos se procesa en el proceso de acceder a los atributos de forma predeterminada para monitorear los atributos agregados dinámicamente
-
La operación de eliminación del atributo de monitoreo predeterminado
-
Propiedad de longitud e índice de matriz de escucha predeterminada
-
Se puede utilizar como módulo independiente
-
Método básico:
- 主要依赖于 Proxy 对象，创建拦截器 handler， 设置 get/set/deleteProperty 实现属性监听 - reactive 实现对象的监听 - ref 实现基础数据类型的监听 - toRefs 实现对象属性的监听 - computed 实现计算属性 - effect 定义副作用函数 - track 实现依赖收集 - trigger 触发响应式 - receiver 为当前的 proxy 对象 或者 继承 proxy 的对象 - 响应式的过程中会将 监听的对象 存储在一个 targetMap(weakMap) 中,他的值是对应的响应式的集合，存放在 depsMap(Map) 中, dep 的值是一个 Set 集合， 存储了对应的 effect，触发时只需要遍历 dep 即可。
API de composición
-
RFC (solicitud de comentarios)
- https://github.com/vuejs/rfcs·Composition
-
API RFC
- https://composition-api.vuejs.org
-
Motivación de diseño
-
API de opciones
-
Contiene un objeto que describe las opciones de los componentes (datos, métodos, accesorios, etc.)
-
La API de opciones desarrolla componentes complejos, el código de la misma lógica funcional se divide en diferentes opciones
-
-
API de composición
-
Un nuevo conjunto de API en Vue.js 3.0
-
Un conjunto de API basadas en funciones
-
La lógica de los componentes se puede organizar de forma más flexible
-
-
createApp
- Se usa para crear objetos Vue
preparar
- Entrada a la API de composición
reactivo
- Crea objetos receptivos
toRefs
- Atraviesa el objeto proxy, de modo que las propiedades del objeto proxy respondan
árbitro
- Cree un objeto receptivo de tipo de datos básico
reloj
-
Tres parámetros de reloj
-
El primer parámetro: los datos a monitorear
-
El segundo parámetro: la función que se ejecutará después de monitorear el cambio de datos, esta función tiene dos parámetros, el nuevo valor y el valor anterior
-
El tercer parámetro: objeto de opción, profundo e inmediato
-
-
valor de retorno del reloj
- Función para cancelar la escucha
watchEffect
-
Es una versión simplificada de la función de reloj, que también se usa para monitorear cambios en los datos.
-
Reciba una función como parámetro y supervise los cambios de los datos de respuesta en la función
Instrucción personalizada
- Ver 2.x
Vue.directive("editingFocus", {
bind(el, binding, vnode, prevVnode) {
},
inserted() {
},
update() {
},
componentUpdated() {
},
unbind() {
},
});
Vue.directive("editingFocus", (el, binding) => {
binding.value && el.focus();
});
- Ver 3.0
app.directive("editingFocus", {
beforeMount(el, binding, vnode, prevVnode) {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeUnmount() {
},
unmounted() {
},
});
app.directive("editingFocus", (el, binding) => {
binding.value && el.focus();
});