vue는 단일 데이터 흐름인가요, 아니면 양방향 데이터 흐름인가요?

vue는 단일 데이터 스트림입니다. Vue에는 양방향 바인딩 "v-model"이 있지만 Vue 상위 구성 요소와 하위 구성 요소 간의 데이터 전송은 여전히 ​​단방향 데이터 흐름을 따릅니다. 상위 구성 요소는 하위 구성 요소에 소품을 전달할 수 있지만 하위 구성 요소는 수정할 수 없습니다. 상위 구성요소가 전달한 props, 하위 구성요소는 이벤트를 통해 상위 구성요소에만 데이터 변경을 알릴 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.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)"/>

• 와 동일 element

사실 위의 내용이 반영되었습니다

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

위의 두 문장은 동일합니다

TIPS

model 2.2.0+

에서는 v-model을 사용할 때 Custom Component에서 Prop과 Event를 Customize할 수 있습니다. 기본적으로 구성 요소의 v-model은 값을 prop으로 사용하고 입력을 이벤트로 사용하지만 라디오 버튼 및 확인란 버튼과 같은 일부 입력 유형은 다른 목적으로 value prop을 사용할 수 있습니다. 이러한 상황에서 충돌을 피하려면 모델 옵션을 사용하십시오.

.sync Modifier 2.3.0+

어떤 경우에는 소품에 "양방향 바인딩"을 수행해야 할 수도 있습니다. 불행하게도 진정한 양방향 바인딩은 하위 구성 요소가 상위 또는 하위 구성 요소의 명백한 변경 소스 없이 상위 구성 요소를 수정할 수 있기 때문에 유지 관리 문제를 발생시킵니다.

요약

그래서 vue는 여전히 단방향 데이터 흐름이고 v-model은 단지 구문 설탕일 뿐이며 반응형 업데이트를 구현하는 :value="sth"和@change="val => sth = val"的简写形式。我们通常在面试当中被提问，Vue是怎么实现数据响应式更新的，面试官期望听到的回答是通过Object.defineProperty()的get和set 방법입니다.

v-model 및 .sync 수정자는 구성 요소의 단일 속성이나 여러 속성에 양방향 바인딩이 필요할 때 각각 사용됩니다. 이것이 사용되는 시나리오입니다.

관련 권장 사항: "vue.js Tutorial"

위 내용은 vue는 단일 데이터 흐름인가요, 아니면 양방향 데이터 흐름인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!