El domingo (2020-07-12) un día de lluvia, afinado, acaba de golpear el principio de respuesta del Vue de 2.0-3.0, y finalmente se dio cuenta de una mini versión de Vue, hay tiempo y todo el mundo lo comparte lentamente. Desde el último blog, sabemos que Vue3.0 sin duda se ha optimizado en la respuesta de los datos, y el rendimiento es muy mejorado. Aunque Vue3.0 aún no ha sido lanzado oficialmente, las principales cifras públicas no tienen nada que ver.
Todos sabemos que la implementación del principio de respuesta de Vue2 es Object.defineProperty esta API, que se utiliza para establecer los métodos getter y setter para los datos de respuesta. Si los datos se multiplexan, se recorren en bucle. El recorrido de bucle reducirá el rendimiento, por lo que Vue3.0 abandonó este método y se cambió a Proxy en ES6. Y este método no tiene un Shim, que no es compatible con el navegador de versión baja. Así que Vue3.0 los abandonó por completo.
1. El código básico es el siguiente
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<Title> Vue3.0 Response Principle </ Title>
</head>
<body>
<div id="app">hello</div>
<script>
const data = {
msg: 'hello',
count: 0
}
// Set a proxy
let vm = new Proxy(data, {
get(target, key) {
console.log('get,key:', key, target[key])
return target[key]
},
set(target, key, newValue) {
console.log("set,key:", key, newValue)
if (target[key] === newValue) {
return
}
target[key] = newValue
document.getElementById('app').textContent = target[key]
}
})
// Test case
vm.msg = "Hello World"
</script>
</body>
</html>2. El uso de Proxy es también el método getter y setter de configuración de datos en DATA, y en este momento, el método getter es parámetro, el primer parámetro es un Data objeto y el segundo parámetro es la clave en el DATA. En este momento, el método setter tiene tres parámetros primero es un data objeto, el segundo es la clave en el DATA y el tercero es el valor que se va a establecer.
3. Al usar el modo proxy Podemos ver incluso si Target [key] = newValue no se produce en el método setter.
.
