vue は単一データ フローですか、それとも双方向データ フローですか?

vue は単一のデータ フローです。 Vue には双方向のバインディング「v-model」がありますが、Vue の親コンポーネントと子コンポーネント間のデータ転送は依然として一方向のデータ フローに従います。親コンポーネントは子コンポーネントに props を渡すことができますが、子コンポーネントはプロパティを変更できません親コンポーネントによって渡されるプロパティ。子コンポーネントは、イベントを通じて親コンポーネントにデータ変更を通知することしかできません。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

双方向バインディング

つまり、双方向バインディングとは、モデルの更新がビューの更新をトリガーし、ビューの更新をトリガーすることを意味します。モデルの更新がトリガーされます。その影響は相互です
[画像のアップロードに失敗しました...(image-81a06f-1556975918443)]

一方向のデータ フロー

要するに、単一のデータ フローは、モデルの更新がビューの更新をトリガーし、ビューの更新がモデルの更新をトリガーしないことを意味します。これらの機能は一方向です

#これはナンセンスではありませんか?誰もが知っています

以下は本当のことです、ベンチに座ってください

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

v-modelの実装原理

コンポーネントに配置

#親コンポーネント

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

子コンポーネント

<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>

親コンポーネントの書き方は

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

input 要素に載せる
#実は上記はそれを反映したものです

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

上の 2 つの文は等しいです。

TIPS

model 2.2.0

v-model を使用するときに、カスタム コンポーネントがプロパティとイベントをカスタマイズできるようにします。デフォルトでは、コンポーネントの v-model は値をプロップとして使用し、入力をイベントとして使用しますが、ラジオ ボタンやチェックボックス ボタンなどの一部の入力タイプでは、別の目的で値プロップを使用する必要がある場合があります。このような状況での競合を回避するには、モデル オプションを使用します。

.sync Modifier 2.3.0

場合によっては、プロップに対して「双方向バインディング」を実行する必要があるかもしれません。残念ながら、真の双方向バインディングでは、親コンポーネントにも子コンポーネントにも明らかな変更源がなくても、子コンポーネントが親コンポーネントを変更できるため、メンテナンスの問題が発生します。

概要

つまり、

vue は依然として一方向のデータ フローです。

、v-model は単なる構文糖衣であり、:value= です。 "sth"and@change="val => sth = val" の略称。通常、面接中に、Vue が応答性の高いデータ更新をどのように実装しているか尋ねられます。面接官が期待する答えは、Object.defineProperty() set メソッドによる get と です。応答性の高い更新を実装します。 v-model 修飾子と .sync 修飾子は、コンポーネントの単一の属性の場合、または複数の属性が双方向のバインディングを必要とする場合にそれぞれ使用されます。これは、両方が使用されるシナリオです。

関連する推奨事項:《

vue.js チュートリアル

》

以上がvue は単一データ フローですか、それとも双方向データ フローですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。