Is vue a single data flow or a bidirectional data flow?

vue is a single data flow. Although Vue has a two-way binding "v-model", the data transfer between Vue parent and child components still follows a one-way data flow. The parent component can pass props to the child component, but the child component cannot modify the props passed by the parent component. , child components can only notify parent components of data changes through events.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Two-way binding

In short, two-way binding means that the update of the model will trigger the update of the view, and the update of the view will trigger the update of the model. Their The effect is mutual
[Image upload failed...(image-81a06f-1556975918443)]

One-way data flow

In short, single The data flow means that the update of the model will trigger the update of the view, and the update of the view will not trigger the update of the model. Their function is one-way

Isn’t this nonsense? Everyone knows

The following is the real stuff, sit on the bench

<ul>
<li>Vue是单向数据流，不是双向绑定</li>
<li>Vue的双向绑定不过是语法糖</li>
<li>Object.definePropert是用来做响应式更新的</li>
</ul>

The implementation principle of v-model

• Place it on the component

Parent component

  <AnalysisSub v-model="phoneInfo" :zip-code.sync="zipCode" /

Child component

<template>
  <div>
    <input
      :value="phoneInfo.phone"
      type="number"
      placeholder="手机号"
      @input="handlePhoneChange"
    />
    <input
      :value="zipCode"
      type="number"
      placeholder="邮编"
      @input="handleZipCodeChange"
    />
  </div></template><script>export default {
  name: "PersonalInfo",
  model: {
    prop: "phoneInfo", // 默认 value
    event: "change" // 默认 input
  },
  props: {
    phoneInfo: Object,
    zipCode: String
  },
  methods: {
    handlePhoneChange(e) {
      this.$emit("change", {
        ...this.phoneInfo,
        phone: e.target.value
      });
    },
    handleZipCodeChange(e) {
      this.$emit("update:zipCode", e.target.value);
    }
  }
};</script>

The writing method of the parent component is equivalent to

 <AnalysisSub :phone-info="phoneInfo" @change="val => (phoneInfo = val)"
    :zip-code="zipCode"  @update:zipCode="val => (zipCode = val)"/>

• Put it on On the input element

In fact, the above has reflected that

<input v-model=“phoneInfo.phone”/>
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

The above two sentences are equal

TIPS

model 2.2.0

Allows a custom component to customize props and events when using v-model. By default, v-model on a component will use value as prop and input as event, but some input types such as radio buttons and checkbox buttons may want to use the value prop for different purposes. Use the model option to avoid conflicts in these situations.

.sync Modifier 2.3.0

In some cases, we may need to perform "two-way binding" on a prop. Unfortunately, true two-way binding creates maintenance problems because child components can modify their parent components with no obvious source of change in either parent or child components.

Summary

So, vue is still a one-way data flow, v-model is just syntax sugar, it is :value= "sth"and@change="val => sth = val"'s abbreviation. We are usually asked during interviews how Vue implements responsive data updates. The answer the interviewer expects to hear is get and through Object.defineProperty() set method to implement responsive updates.

v-model and .sync modifiers are used respectively when a single attribute of a component or when multiple attributes require two-way binding. This is the scenario where both are used.

Related recommendations:《 vue.js tutorial》

The above is the detailed content of Is vue a single data flow or a bidirectional data flow?. For more information, please follow other related articles on the PHP Chinese website!