Vue 클래스 구성 요소를 사용해야 합니다.

소개

저와 같이 Angular에서 Vue에 도착한 사람들은 일부 측면을 놓치고 다른 측면을 선호할 것입니다. 상태 관리에 관해서는 특히 Vuex보다 NgRx를 선호하지만 Vue에서 결코 마음에 들지 않는 부분은 구성 요소의 생성입니다. 구성 요소의 복잡성이 클수록 이해하기 어려워집니다. 이 시점에서 Angular는 클래스 스타일 구문이라고 부를 수 있는 것을 사용합니다. 여기서 구성 요소는 속성, 메서드 등이 있는 클래스입니다. Vue에서는 JS 개체를 사용하여 사양에 따라 Vue 인스턴스를 만듭니다.

이것은 Vue 클래스 구성 요소 라이브러리를 사용하는 주요 이점입니다. 구성 요소를 클래스로 변환하면 코드를 더 잘 구성할 수 있습니다. 그것으로 사용자 정의Decorators를 생성하고, 다른 구성 요소 및/또는 믹스인을 확장하고 Vue 라우터를 사용할 때 추가Hooks를 사용할 수 있습니다.

여기에서는 기본 사항만 다룰 것입니다. 아이디어는 미래에 이 라이브러리의 사용을 보완하는 Vue-Property-Decorator에 대한 기사를 작성하는 것입니다.

설치

처음부터 Vue 클래스 구성 요소를 사용하여 프로젝트를 만들려면 Vue CLI 단계를 따르고 프로젝트 기능을 수동으로 선택하고 TypeScript를 추가한 다음 클래스 스타일 구성 요소 구문을 사용하도록 선택하면 됩니다.

기존 프로젝트를 고려하면 라이브러리를 설치하기만 하면 됩니다.

$ npm install --save vue vue-class-component

오

$ yarn add --save vue vue-class-component

Vue 클래스 구성 요소가 종속되므로 Vue 코어도 설치되어 있는지 확인해야 합니다.
TypeScript 를 사용하는 경우 tsconfig.json 추가 experimentalDecorators: true 를 변경하십시오. Babel 를 사용하는 경우 다음을 수행하십시오.

$ npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

그런 다음 구성합니다.babelrc.

{
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose": true }]
  ]
}

그럼 가시면 됩니다.

예시

따라서 아래에서 일반 Vue 구성 요소를 볼 수 있습니다.

export default {  

  components: { },
  props: { },  

  data () {  
    return {  
      message: 'Hello World!'  
    }  
  },
  computed: {  
    reversedMessage () {  
      return this.message.split('').reverse().join('')  
    }  
  },
  methods: {  
    changeMessage (val) {  
      this.message = val  
    }  
  },

  created () { },  
  mounted () { },  

}

앞서 언급했듯이 컴포넌트는 Vue 인스턴스로 변하는 JS 객체이므로 몇 가지 규칙을 따라야 합니다.

data는 이 구성 요소를 다른 위치에서 다시 사용하려는 경우 객체를 반환하는 함수여야 합니다.

computed에는 기능이 있는 속성이 있지만 때로는 하나 또는 두 개의 다른 기능을 포함하는 객체가 있는 속성이 있습니다( getters/setters ).

methods는 기능을 가진 객체입니다

개체에는 포함될 구성 요소, 상위 구성 요소에서 제공하는 속성 및 구성 요소의 수명 주기에서 자동으로 트리거되는 후크인 메서드도 포함됩니다.

Vue 클래스 구성 요소는 어떻습니까?

@Component({  
  components: { },  
  props: { },  
})  
export default class extends Vue {  
  message = 'Hello World!'

  get reverseMessage () {  
    return this.message.split('').reverse().join('')  
  }

  changeMessage (val) {  
    this.message = val
  }

  created () { }
  mounted () { }
}

Vue 클래스 구성 요소는 구성 요소와 구성 요소의 속성을 정의할 수 있는 데코레이터를 제공합니다. 이는 일회성 구성이기 때문에 의미가 있습니다.

data 값은 클래스의 속성으로 표현됩니다.

get/set 접근자를 사용하여 계산된 값을 생성할 수 있습니다.

다른 모든 것은 클래스의 멤버 함수(라이프 사이클 후크, 메서드)에 의해 정의됩니다.

중요한

이 라이브러리를 사용하기 위해 전체 앱을 리팩토링할 필요는 없습니다. 점진적으로 또는 새 구성 요소로만 수행할 수 있습니다. 구성 요소 간의 호환성은 동일하게 유지되며 표준 구성 요소에 클래스 구성 요소를 포함할 수 있으며 그 반대의 경우도 마찬가지입니다.

결론

아주 간단한 예제지만 Class Components를 사용하면 훨씬 더 우아한 코드를 관찰할 수 있습니다. Angular를 좋아하는 사람이나 근무 중인 백엔더에게는 Vue를 사용하는 훨씬 더 친숙한 방법입니다.

더 궁금하신 분들은 original documentation에서 확인하실 수 있습니다.