prefácio
Como todos sabemos, Vueo modo de gerenciamento de estado do fluxo de dados unidirecional é mais recomendado (por exemplo Vuex), mas , ao Vuemesmo tempo, suporta v-modelvinculação de dados bidirecional por implementação.
Portanto, a questão é: os conceitos de fluxo de dados de item único e vinculação de dados bidirecional não são conflitantes entre si? Agora que v-modela vinculação de dados bidirecional pode ser usada, não deveria ser um fluxo de dados bidirecional?
Este artigo inclui principalmente os seguintes conteúdos
- encadernação em um sentido encadernação
vsem dois sentidos - Fluxo de dados unidirecional Fluxo de dados
vsbidirecional - Por que é
v-modelapenas açúcar sintático ?
encadernação em um sentido encadernação vsem dois sentidos
A vinculação unidirecional e bidirecional refere-se ao relacionamento de mapeamento entre as camadas View. Adota-se a vinculação unidirecional, conforme mostra a figura: Em , quando a camada muda, o usuário a processa emitindo, e no par é atualizado, e a atualização é acionada após a atualização. Pode-se ver que a camada não pode ser modificada diretamente , deve ser operada, o que é mais claro e controlávelModel
react
ReactViewActionsActionssetStateStateStateViewViewStateActions
A vantagem do método de vinculação unidirecional é que ele é claro e controlável, mas a desvantagem é que haverá algum código de modelo, Vueque oferece suporte à vinculação unidirecional e à vinculação bidirecional .
- Ligação unidirecional: formulário de interpolação
{{data}},v-bindtambém ligação unidirecional - Ligação bidirecional: form
v-model, as alterações do usuárioViewna camada serão sincronizadas diretamente com aModelcamada
É realmente v-modelapenas açúcar sintático para ev-bind:value , também podemos usar uma ligação unidirecional semelhante. Ambos têm suas próprias vantagens e desvantagens. A vinculação unidirecional é clara e controlável, mas há muitos códigos de modelo. A vinculação bidirecional pode simplificar o desenvolvimento, mas também levará a alterações de dados opacos. As vantagens e desvantagens coexistem. Você pode usá-lo de acordo com a situação.v-on:inputreact
Fluxo de dados unidirecional Fluxo de dados vsbidirecional
O fluxo de dados refere-se ao fluxo de dados entre os componentes.
VueAmbos Reactsão modelos de fluxo de dados unidirecional. Embora vueexistam ligações bidirecionais v-model, a transferência de dados entre os componentes pai vuee reactfilho ainda segue o fluxo de dados unidirecional. O componente pai pode passar para o componente filho props, mas o componente filho não pode modificar o componente pai. O propscomponente filho só pode notificar o componente pai sobre alterações de dados por meio de eventos, conforme mostrado na figura:
por meio do modelo de fluxo de dados unidirecional, todas as alterações de estado podem ser registradas e rastreadas. Comparado com os dados bidirecionais fluxo, é mais fácil de manter e manter. problema de posicionamento
Por que é v-modelapenas açúcar sintático ?
Você pode usar
v-modeldiretivas para criar ligações de dados bidirecionais em formulários<input>e elementos<textarea>.<select>Ele escolhe automaticamente o método correto para atualizar o elemento com base no tipo de controle. Embora um pouco mágico,v-modelé essencialmente açúcar sintático. Ele é responsável por ouvir os eventos de entrada do usuário para atualizar os dados e faz algum processamento especial para alguns cenários extremos
Como mencionado acima, a Vuedocumentação diz que v-modelé apenas açúcar sintático
<input v-model=“phoneInfo.phone”/>
//在组件中使用时，实际相当于下面的简写
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"
复制代码那么问题来了，为什么说v-model不是真正的双向数据流呢？按照这道理，是不是可以认为model->view的单向数据流也是语法糖啊，也是vue作者通过一定方法实现的而已
真正的原因上面已经说了，数据绑定是View与Model之间的映射关系，数据流指的是组件之间的数据流动
v-model不是真正的双向数据流，是因为它不能直接修改父组件的值，比如你在v-model中绑定props中的值是会报错的，它只能绑定组件的值
而真正的双向数据流，比如AngularJs，是允许在子组件中直接更新父组件的值的，这就是为什么说v-model只是语法糖的原因
总结
总得来说，单双向数据绑定与数据流是两个不同维度的概念，数据绑定是View与Model之间的映射关系，数据流指的是组件之间的数据流动。因此，单向数据流也可有双向绑定，双向数据流也可以有双向绑定，两者不应该混为一谈