집 > 기사 > 웹 프론트엔드 > Vue의 단방향 데이터 흐름 원리에 대한 심층 분석

Vue의 단방향 데이터 흐름 원리에 대한 심층 분석

小云云원래의: 2017-12-22 13:10:292302검색

이 글에서는 주로 Vue의 단방향 데이터 흐름 원리에 대한 심층적인 이해를 소개합니다. 관심 있는 분들은 더 자세히 알아볼 수 있는 참고 자료가 될 것입니다. . 모든 사람에게 도움이 되기를 바랍니다.

단방향 데이터 흐름이란 무엇인가요?

단방향 데이터 흐름은 상태가 한 방향에서만 수정될 수 있다는 의미입니다. 다음 그림은 단방향 데이터 흐름을 최소한으로 표현한 것입니다.

단방향 데이터 흐름을 최소한으로 표현한 것입니다.

단방향 데이터 흐름에 해당하는 것은 양방향 데이터 흐름(2방향이라고도 함)입니다. -웨이 바인딩). 양방향 데이터 흐름에서 모델(상태 모음으로 이해될 수 있음)은 자신의 상태나 다른 모델의 상태를 수정할 수 있으며, 사용자 작업(예: 입력 상자에 콘텐츠 입력)도 상태를 수정할 수 있습니다. . 이로 인해 하나의 상태를 변경하면 일련의 상태 변경이 촉발될 가능성이 높아지므로 최종 상태가 어떻게 될지 예측하기가 어렵습니다. 코드를 디버깅하기 어렵게 만듭니다. 아래 그림과 같이

양방향 데이터 흐름과 비교하면 단방향 데이터 흐름에서는 상태를 수정해야 할 때 수정 프로세스를 완전히 다시 시작해야 합니다. 이는 상태 수정 방법을 제한하여 상태를 예측 가능하게 만들고 디버깅하기 쉽게 만듭니다.

단방향 데이터 흐름의 사용 시나리오

여러 구성 요소가 상태를 공유하면 상태를 공유하고 구성 요소(형제 구성 요소) 간에 통신하기가 어려워집니다. 공유 상태를 추출하고 단방향 데이터 흐름을 사용하는 것이 더 쉬울 것입니다.

v-model로 시작

1. v-model은 입력 요소에 사용됩니다.

v-model은 사용하면 양방향 바인딩과 매우 유사하지만(실제로는...) Vue는 단일 바인딩입니다. 데이터 흐름이며 v-model은 단지 구문 설탕입니다.

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

코드의 첫 번째 줄은 실제로 두 번째 줄의 구문 설탕입니다. 그런 다음 두 번째 코드 줄은 다음과 같이 축약될 수 있습니다.

<input :value="something" @input="something = $event.target.value" />

이 코드 줄을 이해하려면 먼저 입력 요소 자체에 다음과 유사하게 HTML5에 새로 추가된 oninput 이벤트가 있다는 것을 알아야 합니다. onchange, 입력 상자 내용이 변경될 때마다 oninput이 트리거되고 최신 값이 $event를 통해 무언가에 전달됩니다.

우리는 구문 설탕과 원래 구문의 두 줄의 코드를 주의 깊게 관찰하고 결론을 내릴 수 있습니다. v-model 속성을 입력 요소에 추가하면 해당 값이 기본적으로 요소의 속성으로 사용됩니다. 그리고 '입력' 이벤트는 실시간으로 전달됩니다. 값의 트리거 이벤트

2. v-model은 구성 요소에 사용됩니다.

v-model은 입력뿐만 아니라 구성 요소에도 사용할 수 있습니다. 공식 웹사이트의 데모를 살펴보세요.

<currency-input v-model="price"></currency-input>
Vue.component(&#39;currency-input&#39;, {
 template: &#39;\
 <span>\
  $\
  <input\
  ref="input"\
  v-bind:value="value"\
  v-on:input="updateValue($event.target.value)"\
  >\
 </span>\
 &#39;,
 props: [&#39;value&#39;], // 为什么这里要用 value 属性，value在哪里定义的？
 methods: {
 // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
 updateValue: function (value) {
  var formattedValue = value
  // 删除两侧的空格符
  .trim()
  // 保留 2 位小数
  .slice(
   0,
   value.indexOf(&#39;.&#39;) === -1
   ? value.length
   : value.indexOf(&#39;.&#39;) + 3
  )
  // 如果值尚不合规，则手动覆盖为合规的值
  if (formattedValue !== value) {
  this.$refs.input.value = formattedValue
  }
  // 通过 input 事件带出数值
  // <!--为什么这里把 &#39;input&#39; 作为触发事件的事件名？`input` 在哪定义的？-->
  this.$emit(&#39;input&#39;, Number(formattedValue))
 }
 }
})

이 두 질문에 대한 답을 알고 계시다면, v-model을 실제로 마스터하신 것을 축하드립니다. 이해가 되지 않는다면 다음 코드를 살펴보세요:

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

그래서 추가하세요. 컴포넌트 v-model 속성에 대한 기본 값은 컴포넌트의 속성으로 사용되며, 'input' 값은 이벤트를 컴포넌트에 바인딩할 때 이벤트 이름으로 사용됩니다. 이는 구성 요소를 작성할 때 특히 유용합니다.

3. v-model의 단점과 해결책

체크박스나 라디오 버튼과 같은 일반적인 컴포넌트를 만들 때 v-model은 사용하기 쉽지 않습니다.

<input type="checkbox" v-model="something" />

v-model은 value 속성과 oninput 이벤트를 제공합니다. 그러나 우리에게 필요한 것은 value 속성이 아니라 selected 속성이며, 이 라디오 버튼을 클릭하면 oninput 이벤트가 트리거되지 않습니다. . onchange 이벤트만 트리거됩니다.

v-model은 입력 요소에만 사용되므로 이 상황은 해결하기 쉽습니다.

<input type="checkbox" :checked="value" @change="change(value, $event)"

v-model을 구성 요소에 사용하는 경우:

<checkbox v-model="value"></checkbox>

Vue.component(&#39;checkbox&#39;, {
 tempalte: &#39;<input type="checkbox" @change="change" :checked="currentValue"/>&#39;
 props: [&#39;value&#39;],
 data: function () {
  return {
   //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
   currentValue: this.value
  };
 },
 methods: {
 change: function ($event) {
  this.currentValue = $event.target.checked;
  this.$emit(&#39;input&#39;, this.currentValue); 
 }
})

Vue 2.2 버전에서는 사용자 정의할 수 있습니다. 구성 요소를 정의할 때 모델 옵션을 통한 prop/event.

4. Vue 구성 요소 데이터 흐름

위의 v-model 분석을 통해 양방향 데이터 바인딩은 단방향 바인딩을 기반으로 입력 요소(입력, 텍스트 등)에 변경 사항을 추가한다는 것을 이해할 수 있습니다. (입력) 이벤트는 모델과 뷰를 동적으로 수정합니다. 즉, 상위 구성 요소의 이벤트를 트리거($emit)하여 mvvm의 효과를 달성하기 위해 mv를 수정합니다. Vue 구성 요소 간의 데이터 전송은 단방향입니다. 즉, 데이터는 항상 상위 구성 요소에서 하위 구성 요소로 전달됩니다. 하위 구성 요소는 자체 데이터를 내부적으로 유지할 수 있지만 데이터를 수정할 권한은 없습니다. 개발 시 사용자가 이를 시도하면 vue에서 오류를 보고합니다. 이는 구성 요소 간의 더 나은 분리를 위해 수행됩니다. 하위 구성 요소가 상위 구성 요소의 데이터를 수정할 수 있는 경우 하위 구성 요소가 변경됩니다. 모든 하위 구성 요소가 이 데이터에 의존하게 됩니다. 따라서 Vue는 하위 구성 요소가 상위 구성 요소의 데이터를 수정하는 것을 권장하지 않습니다. props를 직접 수정하면 경고가 발생합니다. 흐름도는 다음과 같습니다.

그래서 자식 컴포넌트에서 props를 수정하고 싶을 때는 자식 컴포넌트를 부모 컴포넌트로 사용하면 됩니다.

1. 로컬 변수를 정의하고 prop 값으로 초기화합니다.
2. 계산된 속성을 정의하고 prop 값을 처리하여 반환합니다.

Vue의 단방향 데이터 흐름 원리에 대한 심층 분석

관련 기사