prefacio
Como todos sabemos, Vueel modo de gestión de estado del flujo de datos unidireccional es más recomendable (por ejemplo Vuex), pero al Vuemismo tiempo, admite v-modelel enlace de datos bidireccional mediante la implementación.
Entonces, la pregunta es, ¿los conceptos de flujo de datos de un solo elemento y enlace de datos bidireccional no están en conflicto entre sí? Ahora que v-modelse puede usar el enlace de datos bidireccional, ¿no debería ser un flujo de datos bidireccional?
Este artículo incluye principalmente los siguientes contenidos
- enlace
vsunidireccional enlace bidireccional - Flujo de datos unidireccional Flujo de datos
vsbidireccional - ¿Por qué es
v-modelsolo azúcar sintáctico ?
enlace vsunidireccional enlace bidireccional
El enlace unidireccional y bidireccional se refiere a la relación de mapeo entre capas View. Se adopta el enlace unidireccional, como se muestra en la figura: En , cuando la capa cambia, el usuario la procesa emitiendo, y en el par se actualiza, y la actualización se activa después de la actualización. Se puede ver que la capa no se puede modificar directamente , se debe operar a través de ella, lo cual es más claro y controlable.Model
react
ReactViewActionsActionssetStateStateStateViewViewStateActions
La ventaja del método de vinculación unidireccional es que es claro y controlable, pero la desventaja es que habrá algún código de plantilla Vueque admita tanto la vinculación unidireccional como la vinculación bidireccional .
- Enlace unidireccional: formulario de interpolación
{{data}},v-bindtambién enlace unidireccional - Enlace bidireccional: formulario
v-model, los cambios del usuarioViewen la capa se sincronizarán directamente con laModelcapa
En realidad , es v-modelsolo azúcar sintáctico para yv-bind:value , también podemos tomar un enlace unidireccional similar. Ambos tienen sus propias ventajas y desventajas. El enlace unidireccional es claro y controlable, pero hay demasiados códigos de plantilla. El enlace bidireccional puede simplificar el desarrollo, pero también conducirá a cambios de datos opacos. Las ventajas y desventajas coexisten. Usted puede usarlo de acuerdo a la situación.v-on:inputreact
Flujo de datos unidireccional Flujo de datos vsbidireccional
El flujo de datos se refiere al flujo de datos entre componentes.
VueAmbos Reactson modelos de flujo de datos unidireccional. Aunque vueexisten enlaces bidireccionales v-model, la transferencia de datos entre los componentes principal vuey reactsecundario aún sigue el flujo de datos unidireccional. El componente principal puede pasar al componente secundario props, pero el componente secundario no puede modificar el componente principal. El propscomponente secundario solo puede notificar al componente principal los cambios de datos a través de eventos, como se muestra en la figura:
a través del modelo de flujo de datos unidireccional, todos los cambios de estado se pueden registrar y rastrear. En comparación con los datos bidireccionales flujo, es más fácil de mantener y mantener problema de posicionamiento
¿Por qué es v-modelsolo azúcar sintáctico ?
Puede usar
v-modeldirectivas para crear enlaces de datos bidireccionales en formularios<input>y elementos<textarea>.<select>Selecciona automáticamente el método correcto para actualizar el elemento según el tipo de control. Aunque algo mágico,v-modeles esencialmente azúcar sintáctico. Es responsable de escuchar los eventos de entrada del usuario para actualizar los datos y realiza un procesamiento especial para algunos escenarios extremos.
Como se mencionó anteriormente, la Vuedocumentación dice que v-modeles solo azúcar sintáctico
<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之间的映射关系，数据流指的是组件之间的数据流动。因此，单向数据流也可有双向绑定，双向数据流也可以有双向绑定，两者不应该混为一谈