# Data Option

# 개요

  • BREAKING: data 컴포넌트 옵션 선언은 더이상 일반 자바스크립트 object를 허용하지 않으며, function 선언을 해야합니다.

  • BREAKING: mixin 또는 extends에서 여러 data 반환 값을 병합할 때, 병합은 deep이 아니라 shallow입니다. (root-level의 속성만 병합됨.)

# 2.x 구문

2.x에서 개발자는 object 또는 function을 사용하여 data옵션을 정의할 수 있습니다.

예시:

<!-- 객체 선언 -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- 함수 선언 -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

이는 공유 상태를 갖는 루트 인스턴스 측면에서 약간의 편의를 제공하였지만, 루트 인스턴스에서만 가능하다는 사실로 인해 혼란을 야기하였습니다.

# 3.x 변경점

3.x에서 data옵션은 object를 반환하는 function만 허용하도록 표준화되었습니다.

위의 예제를 사용하면 가능한 코드 구현이 하나뿐입니다:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>
1
2
3
4
5
6
7
8
9
10
11

# Mixin 병합 동작 변경

또한, 컴포넌트의 data()와 해당 mixin 또는 extends 기반이 병합되면, 병합은 shallowly(얕게) 수행됩니다:

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Vue 2.x에서 $data 결과는 다음과 같습니다:

{
  user: {
    id: 2,
    name: 'Jack'
  }
}
1
2
3
4
5
6

3.0에서 결과는 다음과 같습니다:

{
  user: {
    id: 2
  }
}
1
2
3
4
5

# 마이그레이션 방법

객체 선언에 의존하는 사용자의 경우 다음을 권장합니다:

  • 공유 데이터를 외부 객체에서 추출하여 data의 속성으로 사용
  • 새 공유 객체를 가리키도록 공유 데이터에 대한 참조를 다시 작성

mixin의 깊은 병합(deep merge)에 의존하는 사용자의 경우, mixin의 깊은 병합이 매우 암시적이고 코드 로직의 이해도와 디버깅이 더 어렵게 만들 수 있기 때문에, 이러한 의존성을 피하기 위해 코드를 리펙토링하는 것이 좋습니다.

Deployed on Netlify.
Last updated: 2020-12-19, 14:21:20 UTC