O princípio da ligação de dados entre vue3 e vue2

Normalmente minhas notas de estudo são colocadas no memorando e ficam empoeiradas.Hoje tenho tempo para resolver as diferenças nos princípios de vinculação de dados entre vue2 e vue3.

Se você resumir em uma frase, o princípio de implementação do vue2 depende de Object.defineProperty, enquanto o vue3 depende de Proxy.

Object.defineProperty

Este método pode definir diretamente uma nova propriedade em um objeto ou modificar uma propriedade existente de um objeto e retornar o objeto. Os dados responsivos implementados oficialmente desta forma no vue2

Mas para esse tipo de propriedade comum, está tudo bem. O monitoramento de matrizes e objetos precisa ser reencapsulado, e o monitoramento profundo de objetos complexos requer recursão constante. Portanto, tem algumas deficiências:

1. O monitoramento profundo requer recursão até o fim e uma grande quantidade de cálculos de uma só vez.

2. Não é possível monitorar novos atributos/atributos excluídos (vue.set e vue.delete)

Portanto, vue3 usa proxy para implementar a capacidade de resposta.

Procurador

Pode ser usado para criar um proxy para um objeto para implementar a interceptação e personalização de operações básicas (como pesquisa de propriedade, atribuição, enumeração, chamada de função, etc.).

Lembre-se de combinar proxy com reflexo. Eles têm um relacionamento um-para-um.

const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        // 只处理本身（非原型的）属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
            console.log('get', key) // 监听
        }

        const result = Reflect.get(target, key, receiver)
        return result // 返回结果
    },
    set(target, key, val, receiver) {
        // 重复的数据，不处理
        if (val === target[key]) {
            return true
        }

        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        // console.log('result', result) // true
        return result // 是否设置成功
    },   
     deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        // console.log('result', result) // true
        return result // 是否删除成功
    }
})

Então, em comparação, os benefícios do proxy:

1. Desempenho melhorado. No passado, o monitoramento profundo era necessário ao surgir. Agora, o monitoramento só é realizado quando um gatilho é atingido.

2. Pode monitorar atributos novos/excluídos

3. Matrizes que podem ser monitoradas

Pode evitar o problema de object.defineProperty, mas não é compatível com todos os navegadores, o que também é uma de suas desvantagens. Quanto a quais são incompatíveis, você pode acessar o site posso usar para pesquisar a compatibilidade de vários métodos de atributos.