Vue 3 개발의 주요 노하우
5789 단어 vuewebdevjavascriptdevops
2020년 9월 Vue 3의 전면적인 발표는 개발자들에게 큰 개선을 가져왔다.Vue 3은 Vue 2와 완벽하게 호환됩니다.그것은 성능, 더 좋은 가독성, 그리고 일부 새로운 기능을 향상시켰다.
오늘 우리는 그 중의 일부 기능을 연구하고 이를 어떻게 사용하여 개발 업무 절차를 강화하는지 이해할 것이다.또한 Vue의 이전 릴리즈에서 이러한 기능을 사용하는 데 필요한 몇 가지 융통성도 고려할 것입니다.TypeScript 지원, 원격 전송 및 세그먼트에 대해 살펴보겠습니다.
유형 스크립트 지원
Vue 3의 가장 흥미로운 점은 TypeScript(TS)로 작성되었고 이를 완전히 지원한다는 점입니다.기본 TS 지원의 이점은 별도의 도구를 사용할 필요가 없다는 점입니다.또한 어플리케이션이 증가함에 따라 잠재적인 런타임 오류를 방지하는 데 도움이 됩니다.
이전에 Vue 2는 TS의 공식 형식 성명만 있었다. 개발자는 npm을 사용하여 TS를 설치하고 다른 플러그인을 사용해서 오류를 피해야 한다.일반적으로 Vue 2 애플리케이션에서 복잡하고 우회적인 TS 메소드를 사용해야 합니다.Vue 3 API는 TS와 JavaScript 모두에 대해 동일합니다. 즉, Vue 3에서는 두 플랫폼 모두 동일한 수준의 네이티브 지원을 받습니다.
Vue 3에서 TS를 사용하여 Vue 구성 요소를 정의하는 방법을 빠르게 살펴보겠습니다.
import { defineComponent } from 'vue'
const Component = defineComponent({
// type inference enabled
})
<script lang="ts"></script>
전송
전송은 Vue 3의 감동적인 기능입니다.Vue 2에서는 포털이라고 하며 플러그인과 기타 도구가 필요합니다.
Vue는 개발자가 UI와 구성 요소 내부의 관련 행동을 포함하는 사용자 인터페이스(UI) 시스템을 만들도록 권장합니다.그런 다음 이러한 어셈블리는 트리 형식으로 서로 중첩될 수 있습니다.이것은 UI를 구축하는 좋은 방법이지만, 기술적인 측면에서 볼 때, 우리는 구성 요소의 일부분이 문서 대상 모델 (DOM) 의 다른 곳에 존재하기를 바란다.Vue 3의 원격 전송을 통해 우리는 하나의 단독 구성 요소에서 여러 개의 템플릿을 사용할 수 있습니다. 예를 들어modals입니다. 대량의 혼란스러운 CSS나 조합 변경이 필요하지 않습니다.Vue documentation에서 찾은 이 코드는 우리로 하여금 이 변화를 설명할 수 있게 한다.
다음 HTML 구조를 살펴보겠습니다.
<body>
<div style="position: relative;">
<h3>Tooltips with Vue 3 Teleport</h3>
<div>
<modal-button></modal-button>
</div>
</div>
</body>
다음 코드는 Vue 2 툴보다 간단합니다.
app.component('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
원격 전송은 Vue 3의 새로운 인기 기능입니다.이것은 혼란을 줄이고 프로젝트의 가독성을 높이는 좋은 도구다.
조각조각
Vue 3은 세션 또는 다중 노드 구성 요소도 지원합니다.Vue 2에서는 각 어셈블리에 하나의 루트 노드만 있을 수 있습니다.여러 개의 노드를 만들 수 있는 플러그인도 없습니다.
세션은 개발자가 필요할 때 비prop 속성을 정의해야 한다는 것을 주의하십시오.비prop 속성은 구성 요소에 전달되지만 사용할 때 더 많은 정의가 필요한 속성이나 이벤트 탐지기입니다.
Vue 2에서는 단일 div 태그에 어셈블리를 생성해야 하는 경우가 많습니다.이런 방법은 그것들이 어느 템플릿에 속할 수 있는지, 그리고 어떻게 사용하는지에 대한 곤혹을 야기시켰다.Vue 3의 세그먼트는 다음과 같습니다.
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
세션은 DOM의 혼란을 줄이고 더 깨끗한 코드를 만드는 데 매우 유용하다.
결론
Vue 3은 이전 프레임워크 버전보다 훨씬 유연하고 성능이 뛰어납니다.비록 새로운 버전은 많은 새로운 기능을 가져왔지만, 우리가 오늘 연구한 세 가지 기능은 개발자에게 개발 업무 흐름을 강화하는 데 가장 유리하다.
Vue 3은 Vue 2 코드도 이전 버전으로 호환되므로 새로운 기능을 사용하려면 시스템을 완전히 재작성해야 하는 사람이 없습니다.Vue는 완전 오픈소스이며 GitHub에서 완벽하게 유지됩니다.생각해봐joining the project.
Vue 3과 오늘 소개한 기능을 사용할 방법을 찾고 있지만 어디서부터 시작해야 할지 모르면 GrapeCity의 일부 제품을 보십시오.이러한 구성 요소는 Vue 애플리케이션에 원활하게 삽입되어 강력한 향상된 기능을 추가할 수 있습니다.
예를 들어 SpreadJS는 자바스크립트 스프레드시트 솔루션으로 Vue에서 매우 잘 작동한다.개발자는 Vue와 SpreadJS만 사용하면 맞춤형 기능이 풍부한 전자 표, 계기판, 보고서 등을 쉽게 만들 수 있다.
또는, 이것은 UI 구성 요소 집합입니다. React와 Angular에서도 사용할 수 있습니다.Wijmo는SpreadJS와 매우 비슷하여 Vue에서 유연한 도표와 데이터 격자를 만드는 등 많은 유용한 기능을 가지고 있다.Wijmo는 매우 경량급이어서 당신의 프로젝트에 커다란 발자취를 남기지 않습니다.Vue 3을 사용하면 개발자가 더 자유롭게 사용할 수 있습니다.
Reference
이 문제에 관하여(Vue 3 개발의 주요 노하우), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/top-tips-for-vue-3-development-3kig텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
