navegación de páginas blog personal (haga clic a la derecha de enlace para abrir un blog personal): Daniel lo lleve en la pila de tecnología
"No actualizada, sino que se aprende no se mueva", que va al corazón de la cantidad de desarrolladores front-end "desafortunado" que el autor del Día Nacional intervalo de Vue publicó una versión pre-Aplha Vue3.0, lo que significa la Vue3.0 va a reunirse con nosotros. Tanto para la seguridad de, me levantas quiero empezar a hablar de ello. Vue3.0 Con el fin de lograr rápidos, más pequeños, más fácil de mantener, más parecido al original, más objetivo amistoso con el desarrollador, fue reconstruido en muchos aspectos:
- uso de imprenta
- Abandonar la clase utilizando API basado en las funciones
- compilador de reconstrucción
- Reconstrucción de DOM virtuales
- El nuevo tipo de mecanismo de respuesta
charla de hoy nos dejó sobre los datos sensibles reconstruido.
Los primeros en adoptar
Vue3.0 antes y después de la reconstrucción es muy diferente en redacción, anteriormente en la red para Vue3.0 esta reconstrucción radical inició una discusión sobre la forma, una cuestión de opinión. No hay mucho que decir echar un vistazo a en qué medida Vue3.0 agresiva por escrito.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { reactive, computed, effect, createApp } = Vue
const App = {
template: `
<div id="box">
<button @click="add">{{ state.count }}</button>
</div>
`,
setup() {
const state = reactive({
count: 0
})
function add() {
state.count++
}
effect(() => {
console.log('count改变', state.count);
})
return {
state,
add
}
}
}
createApp().mount(App, '#app')
</script>
</body>
</html>De hecho, la redacción y la diferencia Vue2.x un poco grande, pero también toda la salida de un montaje. Pero mi primera impresión por las diferencias en la redacción no es, después de todo, escribió Reaccionar, este enfoque también es nada especial. La clave es dar respuesta a la redacción de este tipo de datos si viste allí? Escribió Reaccionar proyecto podría decir a simple vista, sí que es MOBX , en respuesta a la administración del estado del tapón de un tipo Reaccionar
import {observable,computed,autorun} from "mobx"
var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));
var disposer = autorun(() => console.log(sum.get()));
// 输出 '6'
numbers.push(4);
// 输出 '10'
numbers.push(5);Mira estos y otros métodos sensibles de exposición Vue3.0 datos:
- reactiva (valor)
Creación de variables observables, los parámetros pueden ser JS tipo primitivo, de referencia, las instancias de clases de objetos puros, matrices, colecciones (Mapa | Set).
- efecto (fn)
medios de efectos que los efectos secundarios, este método primero realizará un defecto. Si hay un cambio de propiedades observables fn dependiente, la función de devolución de llamada se activa de nuevo
- computarizada (() => expresión)
Crear un valor calculado,
computedlas implementaciones se basaneffectpara lograr, se caracteriza porcomputedla función no se ejecutará inmediatamente, hay muchas veces el valor de almacenamiento en caché de mecanismo,expressionno debería haber efectos secundarios, pero sólo para devolver un valor. Cuando esteexpressionse pueden observar cambios dependientes del tiempo en las propiedades, se volverá a calcular esta expresión.
Y MOBX tienen el mismo propósito.
En respuesta a la Vue3.0 Crear objeto separado del componente de inicialización de instancia a cabo, crédito a título de la exposición de la API de objetos creados en respuesta al desarrollador, el desarrollador es libre de decidir cuándo y dónde crear objetos sensibles, en el rojo este punto I Vue3.0 el primer polvo.
mecanismo de respuesta reconstruye traer lo que cambia?
Cada versión principal de nuevas características significa la aparición de nuevas propiedades, a continuación, cambiar el tipo de la respuesta de la parte de datos de las versiones reconstruidas antes de 3,0, en comparación con lo que? Escúchame explicar lo siguiente:
Una gama completa de escucha
Vue2.x que son la mayoría del punto Tucao sólo se alcanza para una serie de push,pop,shift,unshift,splice,sort,reverse' oyentes estos siete métodos, la vez anterior cambiando el valor de no se desencadena ver las actualizaciones del subíndice de matriz. Aquí inserto una digresión, muchas personas piensan Vue2.x en la matriz no puede alcanzar todos los aspectos de escucha no está escuchando Object.defineProperty sujetos a cambios en la matriz, que pueden personas equivocadas, y la gente puede escuchar por el derecho de cambio de índice de matriz, no lo crea
const arr = ["2019","云","栖","音","乐","节"];
arr.forEach((val,index)=>{
Object.defineProperty(arr,index,{
set(newVal){
console.log("赋值");
},
get(){
console.log("取值");
return val;
}
})
})
let index = arr[1];
//取值
arr[0] = "2050";
//赋值No hay problemas, todo cambia en el dominio de las personas. El código anterior, no hay gente no entendía, yo pretendo que no sabes, palillo Photo
Desde el punto de vista de la matriz de estructura de datos, la matriz es una colección de valores-clave de pares de valores clave, pero clave es un rellenos digitales se pueden lograr acceso y la matriz natural indexada asignación recibido por Object.defineProperty. De hecho Vue2.x no se ha implementado un conjunto de todos los aspectos de escucha principalmente por dos razones:
- Y una serie de objetos en comparación con el ordinario, serie JS también "cambiar" el. Por ejemplo:
arr.length=0, una matriz instante puede limpiado;arr[100]=1y puede ser cambiado instantáneamente a la longitud de una matriz 100 (otros lugares se llenan con el elemento de vacío), etc. muestran el funcionamiento. Para que un objeto ordinario, que por lo general sólo cambiamos el valor de Clave Valor correspondiente, pero ni siquiera la clave ha cambiado, pero la matriz no es la misma clave y el valor menudo hemos aumentar o disminuir, por lo que después de cada cambio que tendrá que volver Todo clave de uso recursivo Object.defineProperty toda gama más setter y getter, mientras que nosotros tenemos una serie exhaustiva de cada cambio puede, por lo que inevitablemente traerá un rendimiento por encima, algunas personas pueden pensar que esto sobrecarga de rendimiento x consideran un dado, pero los problemas de rendimiento son causados por pequeñas a grandes, si la cantidad de datos almacenados en la matriz y la operación con frecuencia, sería un gran problema. React16.x porque cuando en la optimización textNode, la eliminación de unas etiquetas span sin sentido, se dice que ha mejorado el número de puntos porcentuales, por lo que los problemas de rendimiento no se puede subestimar el rendimiento. - Matriz a menudo se opera en la aplicación, pero por lo general
push,pop,shift,unshift,splice,sort,reverseestos siete modos de funcionamiento será capaz de alcanzar sus objetivos. Por lo tanto, por razones de rendimiento Vue2.x hizo algunas ventajas y desventajas.
Así Vue3.0 la forma en que se remontan al oyente para lograr una gama completa de ella? La respuesta es que Reflet proxy y la aparición de CP nativa, el uso Vue3.0 proxy como el núcleo de los datos de respuesta para lograr devuelve un objeto proxy Proxy, para recoger y depender actualizaciones a través de un objeto proxy activan. Probablemente el mismo principio que este código:
const arr = ["2019","云","栖","音","乐","节"];
let ProxyArray = new Proxy(arr,{
get:function(target, name, value, receiver) {
console.log("取值")
return Reflect.get(target,name);
},
set: function(target, name, value, receiver) {
console.log("赋值")
Reflect.set(target,name, value, receiver);;
}
})
const index = ProxyArray[0];
//取值
ProxyArray[0]="2050"
//赋值Y efecto Object.defineProperty como el mismo, y se ve elegante y refinado allí? Y siempre y cuando el objeto proxy puede proxy, que se mencionará más adelante. Aunque el curso es Vue3.0 tiene un nuevo amor, el amor de edad, pero no se olvide, para una serie de varias maneras en las versiones anteriores del oyente o todavía apoya.
monitor de inertes
¿Qué es "inerte escuchar"?
Simplemente, es "perezosa", el desarrollador puede generar opcionalmente un objetivo de observación. A menudo, en el desarrollo normal de una escena así, algunos de los datos de la página no va a cambiar a lo largo del ciclo de vida de la página, a continuación, esta parte de los datos no necesitan tener la capacidad de respuesta, la cual fue previamente ninguna alternativa Vue3.0 y usar todos los datos de las necesidades de datos de plantilla que se define, la instancia de componente en la inicialización de datos estará disponible a través de los objetos de destino observación.
¿Cuáles son los beneficios de la escucha inerte?
- Inicialización aumenta la instancia de componente de velocidad
Vue3.0 instancia de componente inicializado previamente cuando los datos se convertirá en disponible a través de los objetos de destino observación, utilizando el getter Object.defineProperty acoplado a cada tecla y Settter por una forma recursiva, si la matriz es una matriz de objetos de reescribir agente siete métodos. En Vue3.0, los derechos objeto creado en respuesta al tipo de desarrollador, el desarrollador, por la exposición a compted, formas efecto reactivos para personalizar los datos que necesitan la capacidad de respuesta, durante la inicialización casos no es necesario a los datos recursiva de destino, reduciendo así el tiempo de montaje de instanciación.
- Reducir el uso de memoria para ejecutar
Vue3.0 generada previamente objeto de destino responde atravesará la profundidad, al mismo tiempo, generar una clave def para cada objeto se utiliza para guardar todas las dependencias clave, cuando el valor de clave dependencias para la actualización de notificación de cambio correspondiente. Pero si estas dependencias deben ser actualizados en las páginas de todo el tiempo del ciclo de la vida, entonces los objetos def dependencias recogidos no sólo es inútil, sino también ocupan memoria, si no se puede ignorar estos cambios en el valor de los datos de inicialización cuando se Está bien. Vue3.0 expuesta por métodos reactivos, los desarrolladores pueden crear objetos observables selectivos, para reducir las dependencias almacenados, reducir el uso de memoria para funcionar.
Mapa, Set, WeakSet, escucha WeakMap
Lo anterior proxy puede Proxy todos los objetos, piensa inmediatamente en el nuevo ES6 dentro de una colección de Mapa, Set, tipo de agregación de apoyo benefició proxy y reflexionar. Esto realmente habla antes, así que realmente no conocen agentes proxy puede, en consecuencia, aparte de otras cosas directamente con las manos agente proxy de un mapa para tratar el agua
let map = new Map([["name","zhengcaiyun"]])
let mapProxy = new Proxy(map, {
get(target, key, receiver) {
console.log("取值:",key)
return Reflect.get(target, key, receiver)
}
})
mapProxy.get("name")TypeError no detectada: Método Map.prototype.get llama en el receptor incompatible [object Object]
Se sirvió una taza de agua fría, el informe incorrecto. El original Map、Set objeto se le asigna un valor y que apunte al interior de esta relación, pero este es el punto aquí es en realidad objetos proxy, por lo que tiene esta seca
let map = new Map([['name','wangyangyang']])
let mapProxy = new Proxy(map, {
get(target, key, receiver) {
var value = Reflect.get(...arguments)
console.log("取值:",...arguments)
return typeof value == 'function' ? value.bind(target) : value
}
})
mapProxy.get("name")Cuando se obtiene una función, el objeto original alcance de unión por medio de la unión a Map、Set la suficiente objetivo.
Cómo Vue3.0 es lograr el tipo de recolección de datos está escuchando?
Agudos ojos alumnos leen el código anterior se encuentra un problema, no existe un método conjunto de colección, la colección se completa con la operación de suma, entonces se supone que debe hacer? Así Vue3.0 echar un vistazo a cómo tratar con el código fuente después de que el párrafo anterior simplifica
function reactive(target: object) {
return createReactiveObject(
target,
rawToReactive,
reactiveToRaw,
mutableHandlers,
mutableCollectionHandlers
)
}
function createReactiveObject(
target: any,
toProxy: WeakMap<any, any>,
toRaw: WeakMap<any, any>,
baseHandlers: ProxyHandler<any>,
collectionHandlers: ProxyHandler<any>
) {
//collectionTypes = new Set<Function>([Set, Map, WeakMap, WeakSet])
const handlers = collectionTypes.has(target.constructor)
? collectionHandlers
: baseHandlers
//生成代理对象
observed = new Proxy(target, handlers)
toProxy.set(target, observed)
toRaw.set(observed, target)
if (!targetMap.has(target)) {
targetMap.set(target, new Map())
}
return observed
}Dependiendo de los tipos de controlador de adaptador de objetivo, si se establece ( Map、Set) utilizará collectionHandlers, utilizar otros tipos de baseHandlers. Aquí puedes collectionHandlers
export const mutableCollectionHandlers: ProxyHandler<any> = {
get: createInstrumentationGetter(mutableInstrumentations)
}
export const readonlyCollectionHandlers: ProxyHandler<any> = {
get: createInstrumentationGetter(readonlyInstrumentations)
}No hay accidentes sólo reciben, muestran que se muestran aquí:
// 可变数据插桩对象，以及一系列相应的插桩方法
const mutableInstrumentations: any = {
get(key: any) {
return get(this, key, toReactive)
},
get size() {
return size(this)
},
has,
add,
set,
delete: deleteEntry,
clear,
forEach: createForEach(false)
}
// 迭代器相关的方法
const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
iteratorMethods.forEach(method => {
mutableInstrumentations[method] = createIterableMethod(method, false)
readonlyInstrumentations[method] = createIterableMethod(method, true)
})
// 创建getter的函数
function createInstrumentationGetter(instrumentations: any) {
return function getInstrumented(
target: any,
key: string | symbol,
receiver: any
) {
target =
hasOwn(instrumentations, key) && key in target ? instrumentations : target
return Reflect.get(target, key, receiver)
}
}Debido a las trampas de proxy con Map|Set métodos nativos inconsistentes para la colección, y por lo tanto no puede ser secuestrado por el conjunto de proxy, por lo que el autor aquí fueron "un fraude", en el que el objeto ordinario de nueva creación y una colección de objetos con las mismas propiedades y métodos de los objetos de recogida de ponerse en el objetivo objetos ordinarios en el objeto recién creado durante la operación. De esta manera, Reflejar cuando llame para obtener la operación refleja este nuevo objeto, cuando se llama al método set directamente llamar al método puede desencadenar una respuesta en el nuevo objeto, que no es muy inteligente? Por lo que una gran cantidad de ventajas para mirar el código fuente, puede aprender el funcionamiento de Sao aprender otras personas de.
Es decir, cómo hacer?
Esta es una verdad que no quiero mencionar, pero no abrir en torno al tema, es decir, sin diferencia en los ojos de desarrollo front-end y el diablo. Antes Vue3.0, implementar datos sensible depende Object.defineProperty ES5, siempre y cuando el navegador es compatible con el apoyo ES5 Vue, es decir el apoyo Vue2.x a IE9. Vue3.0 basa proxy y reflexionar sobre el nacimiento CP de una nueva era, y no puede ser traducido a ES5, o compatible proporcionada por Polyfill, que es embarazoso. los desarrolladores de tecnología de información de primera línea aprendidas, antes del lanzamiento oficial de la versión final será complaciente EI11, como para las versiones anteriores de IE sólo enviaría una de la fresca.
De hecho, no ser demasiado problemas de IE enredado, porque el propio IE de Microsoft, incluso tiene que renunciar a un tratamiento de cromo abrazo, y ¿por qué hemos enredado él?
aprendizaje adjunta Java / C / C ++ / máquina / Algoritmos y Estructuras de Datos / front-end / Android / Python / programador de lectura / libros individuales libros Daquan:
(Haga clic en la derecha para abrir allí en el blog personal en seco): seca Técnica de floración
===== >> ① [Java Daniel lo lleve en el camino a avanzado] << ====
===== >> ② [+ acm algoritmo de estructura de datos Daniel lo lleve en el camino a avanzado] << ===
===== >> ③ [base de datos de Daniel lo lleve en el camino a avanzado] << == ===
===== >> ④ [Daniel cliente web para llevarlo en el camino a avanzado] << ====
===== >> ⑤ [pitón máquina de aprendizaje y Daniel le llevará a la entrada camino avanzada] << ====
===== >> ⑥ [arquitecto Daniel lo lleve en el camino a avanzado] << =====
===== >> ⑦ [C ++ Daniel avanzó para llevarlo en el camino] << ====
===== >> ⑧ [ios Daniel lo lleve en el camino a avanzado] << ====
=====> > ⑨ [seguridad web Daniel lo lleve en el camino a avanzado] << =====
===== >> ⑩ [sistema operativo Linux y Daniel se toman en el camino a avanzado] << = ====No hay frutas consumidas, espero que jóvenes amigos, amigos desea aprender técnicas, superando todos los obstáculos en el camino de la carretera determinada para atar en la tecnología, entender el libro, y luego golpear en el código, entender el principio, e ir a la práctica, se se le dan vida, su trabajo, su futuro un sueño.
