Como implementar a vinculação de dados bidirecional no Vue (princípio subjacente)

1. Introdução ao modelo v

在Vue中，数据的双向绑定是通过指令v-model来实现的。v-model指令可以将表单元素的值与Vue实例中的数据属性进行绑定，使得它们在双向修改。

v-model指令会根据表单元素的不同类型，在内部自动绑定不同的事件和属性。当表单元素的值发生变化时，会触发相应的事件，
然后更新Vue实例中对应的数据属性。反过来，当Vue实例中的数据属性发生变化时，会通过绑定的属性将新值自动更新到表单元素上。

Isso nos torna muito mais convenientes durante o processo de desenvolvimento, mas como é implementada a implementação subjacente de um método tão conveniente?

2. Princípio de implementação

O princípio subjacente da ligação de dados bidirecional do Vue é baseado principalmente em dois mecanismos: método Object.defineProperty e DOM virtual (se você não entende Object.defineProperty, você pode aprender sobre isso primeiro)

Vue implementa o padrão observador usando Object.defineProperty no objeto de dados. Por meio desse recurso, o Vue pode rastrear alterações de dados e notificar dependências relacionadas para atualizar quando elas mudarem.

Vue converterá objetos de dados em objetos reativos. Quando o objeto de dados for acessado, o Vue irá modificá-lo através de Object.defineProperty e adicionar getters e setters. Quando o valor de uma propriedade é modificado, o Vue escutará a mudança e notificará o local onde os dados são usados ​​para atualizar adequadamente.

DOM virtual (DOM virtual): Vue usa DOM virtual para otimizar a atualização e renderização de dados. Virtual DOM é um objeto JavaScript na memória que representa um nó DOM. Quando os dados mudam, o Vue criará uma nova árvore DOM virtual e calculará a quantidade mínima de operações DOM comparando a diferença entre as árvores DOM virtuais antigas e novas e, em seguida, atualizará apenas as partes que precisam ser alteradas.

Títulos de terceiro nível Dessa forma, o Vue obtém atualizações eficientes do DOM, evita redesenho e nova renderização inválidos e melhora o desempenho.

Resumindo, o princípio subjacente da ligação de dados bidirecional do Vue é baseado principalmente no modo observador e no DOM virtual. Ao usar o padrão observador para rastrear alterações de dados e otimizar a atualização e renderização de dados por meio de DOM virtual, o Vue implementa vinculação de dados e operações DOM eficientes, proporcionando uma experiência de desenvolvimento conveniente.