Vue est-il un flux de données unique ou un flux de données bidirectionnel ?

vue est un flux de données unique. Bien que Vue ait un "v-model" de liaison bidirectionnelle, le transfert de données entre les composants parent et enfant de Vue suit toujours un flux de données unidirectionnel. Le composant parent peut transmettre des accessoires au composant enfant, mais le composant enfant ne peut pas les modifier. props transmis par le composant parent, les composants enfants ne peuvent informer les composants parents des modifications de données que par le biais d'événements.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Liaison bidirectionnelle

En bref, la liaison bidirectionnelle signifie que la mise à jour du modèle déclenchera la mise à jour de la vue, et la mise à jour de la vue déclenchera la mise à jour du modèle. Leurs effets sont mutuels.
[Échec du téléchargement de l'image... (image-81a06f-1556975918443)]

Flux de données unidirectionnel

En bref, un flux de données unidirectionnel signifie que la mise à jour du modèle déclenchera la mise à jour de la vue, et la mise à jour de la vue ne déclenchera pas la mise à jour du modèle. Leurs fonctions C'est à sens unique

N'est-ce pas un non-sens, tout le monde le sait

Ce qui suit est le vrai truc, asseyez-vous sur le banc

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

Le principe d'implémentation du v-model

• Placez-le sur le composant

Composant parent

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

Composant enfant

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

La méthode d'écriture du composant parent est équivalente à

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

• placé sur l'entrée element

En fait, ce qui précède reflète

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

Les deux phrases ci-dessus sont égales

CONSEILS

le modèle 2.2.0+

permet à un composant personnalisé de personnaliser les accessoires et les événements lors de l'utilisation du v-model. Par défaut, le modèle v sur un composant utilisera la valeur comme accessoire et l'entrée comme événement, mais certains types d'entrée tels que les boutons radio et les cases à cocher peuvent vouloir utiliser l'accessoire de valeur à des fins différentes. Utilisez l'option modèle pour éviter les conflits dans ces situations.

.sync Modifier 2.3.0+

Dans certains cas, nous pouvons avoir besoin d'effectuer une "liaison bidirectionnelle" sur un accessoire. Malheureusement, une véritable liaison bidirectionnelle crée des problèmes de maintenance car les composants enfants peuvent modifier leurs composants parents sans source évidente de changement dans les composants parents ou enfants.

Résumé

Donc, vue est toujours un flux de données à sens unique, le v-model n'est que du sucre syntaxique, c'est une :value="sth"和@change="val => sth = val"的简写形式。我们通常在面试当中被提问，Vue是怎么实现数据响应式更新的，面试官期望听到的回答是通过Object.defineProperty()的get和set méthode pour implémenter des mises à jour réactives.

Les modificateurs v-model et .sync sont utilisés respectivement lorsqu'un seul attribut d'un composant ou plusieurs attributs nécessitent une liaison bidirectionnelle. C'est le scénario dans lequel ils sont utilisés

Recommandations associées : "Tutoriel vue.js"

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!