Wijmo와 Vue3 프레임워크
페이지 정보
작성자 GrapeCity 작성일 2020-07-22 00:00 조회 4,289회 댓글 0건본문
관련링크
릴리스는 2020년 3/4분기로 예정되어 있습니다. 팀은 해당 릴리스를 준비하고 있으며 현재 Vue 3에 대한 베타 지원을 제공하고 있습니다.
Wijmo에서 Vue 3 프레임워크 구현
Vue 3에는 새로운 기능이 다수 포함되어 있습니다. 여기서는 Wijmo 팀이 Wijmo 라이브러리에서 Vue 3 호환성을 구현하는 과정에서 다루었던 프레임워크의 몇 가지 측면에 관해 설명하겠습니다.
새로운 컴퍼지션 API 및 기존 옵션 API
컴포넌트 등록
Vue3의 컴포넌트는 응용 프로그램 수준에서 등록됩니다. Vue2 컴포넌트는 전역적으로 등록됩니다. Wijmo 팀은 보조 함수와 간소화된 응용 프로그램 수준 등록을 도입했습니다.
API 변경 사항
변경 사항은 특히 컴포넌트의 다양한 측면과 지시문 등록, 슬롯 사용, 필터 제거 등과 관련이 있습니다. 변경 사항은 에 기술되어 있습니다. 컴포넌트 템플릿에서 Wijmo 필터를 사용 중인 Wijmo 고객은 필터 제거로 인해 영향을 받을 수 있습니다.
이 포스팅 후반부에서 필터 솔루션에 관해 설명하겠습니다.
프록시 기반 반응성
Vue3 내부를 살짝만 들여다보면 Vue3의 모든 것이 프록시라는 결론을 얻을 수 있을 것입니다. 프록시를 사용하려면 IE11 호환성에 대한 추가 노력이 필요합니다. 이 호환성은 아직 구현되지 않았습니다.
Vue3는 프록시 기반 반응성이 특징입니다. Vue2에서는 내부 상태가 포함된 개체가 데이터로 사용되는 경우 반응성이 변경될 수 있습니다.
예를 들어 다음과 같이 컴포넌트가 Vue2에서 올바르게 작동하지만(카운터 보기가 업데이트됨) Vue3에서는 작동하지 않습니다.
<template> <div> {{model.counter}} </div> </template> <script> class Model { constructor() { this.counter = 0; setInterval(() => { this.counter++; }, 1000); } } export default { data() { return { model: new Model() }; }, } </script>
안타깝게도 Vue 3에 맞게 샘플을 간단히 조정할 수 있는 방법은 없습니다.
Vue 3에서 Wijmo 사용하기
Vue3는 Vue2와 동일한 interop의 지원을 Wijmo에게서 받지만, Wijmo 컴포넌트 사용법은 Vue2와 약간 다릅니다.
Wijmo 컴포넌트 사용법
사용자 정의 컴포넌트 수준에서 Wijmo 컴포넌트 및 지시문을 등록합니다.
이것은 가장 명확한 등록 방법입니다.
보조 등록 함수를 사용합니다.
응용 프로그램 수준에서 주어진 Wijmo 모듈로부터 모든 컴포넌트 및 지시문을 등록
다수의 컴포넌트를 사용하고 동시에 등록해야 하는 경우 유용함
1. 사용자 정의 컴포넌트 수준 등록
<template>
<wj-input-number />
<button v-wjTooltip="Click me">Click</button>
</template>
<script>
import { WjTooltip } from '@grapecity/wijmo.vue2.core';
import { WjInputNumber } from '@grapecity/wijmo.vue2.input';
export default {
components: {
WjInputNumber,
},
directives: {
WjTooltip,
},
}
</script>
2. 보조 등록 함수
import { createApp } from 'vue' import App from './App.vue' import { registerCore } from '@grapecity/wijmo.vue2.core'; import { registerInput } from '@grapecity/wijmo.vue2.input'; const app = createApp(App) registerCore(app); // register all components and directives from @grapecity/wijmo.vue2.core module registerInput(app); // register all components and directives from @grapecity/wijmo.vue2.input module app.mount('#app');
그리고 컴포넌트 파일(App.vue):
<template> <wj-input-number /> <button v-wjTooltip="Click me">Click</button> </template> <script> export default { } </script>
3. 컴포넌트 파일(App.vue)
<template> <div>{{ theAmount | wj-format('c') }}</div> </template> <script> export default { data() { return { theAmount: 10 }; }, }; </script>
사용자 정의 컴포넌트가 위와 같은 wjFormat 필터를 사용하는 경우 다음과 같은 wjFormat 함수 호출로 교체되어야 합니다.
<template> <div>{{ format(theAmount, 'c') }}</div> </template> <script> import { wjFormat } from '@grapecity/wijmo.vue2.core'; export default { data() { return { theAmount: 10 }; }, methods: { format(value, format) { return wjFormat(value, format); }, }, }; </script>
"export 'default' (imported as 'VueModuleDefault') was not found in 'vue' in the development environment."와 같은 경고가 표시될 수 있습니다. 이 경고는 응용 프로그램 기능에 영향을 미치지 않으며 프로덕션 환경에는 표시되지 않습니다.
Wijmo와 Vue 3
Wijmo는 Vue2와 동일한 interop의 Vue3 베타 지원을 받습니다. Wijmo를 사용하는 기존 사용자 정의 컴포넌트는 Vue3 환경에 맞게 조정해야 합니다.
댓글목록
등록된 댓글이 없습니다.