Princípio de resposta a dados Vue3

essencial:

• Através de Proxy (proxy): Intercepta quaisquer (13 tipos) operações em qualquer atributo de dados, incluindo leitura e gravação de valores de atributos, adição de atributos, exclusão de atributos, etc...

• Através do Reflect (reflexão): execute dinamicamente operações específicas nas propriedades correspondentes do objeto proxy

const userData = {
    
    
	name: "John",
    age: 12
};

let proxyUser = new Proxy(userData, {
    
    
	// 拦截读取属性值
    get (target, prop) {
    
    
    	return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
    
    
    	return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
    
    
    	return Reflect.deleteProperty(target, prop)
    }
})
// 设置属性值
proxyUser.name = 'bob'
proxyUser.age = 13

// 添加属性
proxyUser.sex = '男'
console.log(user)

// 删除属性
delete proxyUser.sex
console.log(user)

Como a capacidade de resposta do Vue3 é melhor que a do Vue2?

1. É mais eficiente. No Vue2, presume-se que ouça um objeto. Existem 10.000 propriedades no objeto. Ele precisa percorrer cada propriedade e adicionar métodos set e get a cada propriedade por meio de Object.defineProperty de cada propriedade. , então, se houver 10.000, 10.000 pares de métodos get e set devem ser adicionados, então a eficiência é muito baixa; no Vue3, adicione diretamente um objeto proxy para refletir e, em seguida, chame métodos relacionados para resolver este problema;
2. Responsivo no Vue3 é um nível profundo de monitoramento, que pode monitorar objetos e arrays em objetos;