props의default 값에서 Object나 Arry를 지정할 때factory 함수를 사용해야 하는 이유

너는 이 글을 보고 있다. 즉, 컨트롤러에 다음과 같은 오류가 생겼다는 것이다.

WARN

[Vue warn]: Invalid default value for prop "XXX": Props with type Object/Array must use a factory function to return the default value.

이 경고는 Vue 구성 요소props와 관련이 있습니다.
"props의default 값에서 Object나 Arry를 사용하려면factory 함수를 지정하십시오."
라는 내용의 경고를 보냈다.

경고 무시

다음 수정 코드를 통해 경고를 없앨 수 있습니다.

수정 전

props: {
  obj: {
    type     : Object,
    require  : false,
    'default': { count: 0 } // Objectをそのまま指定している
  },
}

수정 후

props: {
  obj: {
    type     : Object,
    require  : false,
    'default': () => ({ count: 0 }) // Objectを生成する関数を指定する
  },
}

함수를 지정해야 하는 이유

왜냐하면, Object 또는 Arry를 기본값으로 사용하려면 함수를 지정해야 합니다.

경고를 무시하면 무슨 일이 일어날지

우선 경고를 무시하는 상황에서 무슨 일이 일어날지 시도해 보자.
AppCounter.vue

<template>
  <div class="content">
    <span>{{ obj.count }}</span>
    <button @click="obj.count++;">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      require: false,
      'default': { count: 0 } // ワーニングを無視して、Objectをそのまま指定している
    }
  }
};
</script>

Vue 구성 요소인 카운터를 추가하려면 +1 버튼을 클릭합니다.
App.vue

<template>
  <div id="app">
    <app-counter />
    <app-counter />
  </div>
</template>

<script>
import AppCounter from "./components/AppCounter";

export default {
  name: "App",
  components: {
    AppCounter
  }
};
</script>

그 카운터 2개를 놓고 작동해 보면 결과는 다음과 같다.

어떤 버튼을 누르든지 두 계수기는 점차 증가한다.
↓의 링크는 실제로 만질 수 있다.
대상이나 그룹은 값을 복사하지 않고 인용을 공유합니다 기본값의 대상이나 그룹은 값을 복사하지 않고 인용을 공유합니다. 따라서 여러 vue 인스턴스가 동일한 Object를 참조하여 동일한 Object를 변경하는 경우가 발생합니다. 두 카운터가 어떤 버튼을 조작할 때 점차 늘어나기 때문이다. 경고가 아니라 프레임 한쪽에서 자동으로 Object와 배열을 심도 있게 복사하면 되지 않습니까?그렇게 생각할 수도 있지만 개발자 측에서 팩토리 함수를 지정하는 것은 심도 복제와 관련된 위험을 억제하는 동시에 실시하는 옵션을 확대하고 자유를 높이기 위한 것이다. 참고 자료