잠입 Vue 3 - 입문

Vue는 전면 JavaScript 프레임워크로 UI(사용자 인터페이스)와 SPA(한 페이지 응용 프로그램)를 구축하는 데 사용됩니다.Vue3는 출시된 지 오래되었지만, 아직까지 그것을 이해하는 데 시간이 걸리지 않았다. 왜냐하면 새로운 것을 배우는 것이 좀 무섭기 때문이다.
핑계 대지 마.저는 Vue 3에 잠입하고 있습니다. Vue 2에 대한 인상을 적겠습니다.만약 당신과 나처럼 다음과 같은 문제가 있다면:

Vue 3에서 어셈블리 파일을 설정하는 방법은 무엇입니까?

이 새로운 방법은 무엇입니까?

합성 API(Vue 3) 및 옵션 API(Vue 2)는 무엇입니까?

아이템, 이벤트와 생명주기 연결은 기본적으로 같나요?아니면 내가 큰 변화를 만날 수 있을까?

Vue 3은 어떻게 시작합니까?

그러면 이 일련의 댓글은 너에게 가치가 있을 것이다!Vue 3에 관심이 있다면 계속 읽어 보십시오.

CLI. - 저희가 상자에서 뭘 얻었어요.

먼저 Vue CLI를 사용하여 Vue 2 및 Vue 3 프로젝트 설정을 비교해 보겠습니다.
Vue CLI 는 새로운 Vue 프로젝트를 시작하고 실행에 필요한 모든 파일을 제공하는 데 도움을 줍니다.
Vue 2를 사용하면 터미널에서 다음 명령을 실행하기만 하면 CLI에서 설치를 안내합니다.

vue create YOUR-PROJECT-NAME

좋은 소식!Vue 3의 경우 거의 동일합니다.installed Vue 3가 완료되면 명령을 입력하면 선택할 수 있는 목록이 표시됩니다.새 항목에 대해 Vue 2 또는 Vue 3을 선택할 수 있습니다.

Vue 3이 내 취향에 맞지 않으면 완전히 몰입할 필요가 없다는 뜻이기 때문에 나는 이 점을 좋아한다.Vue 3으로 업그레이드하면 Vue 2 또는 Vue 3에서 프로젝트를 쉽게 부트할 수 있습니다.
이번에 저는 Vue 3을 선택하겠습니다. 그러면 제가 Vue 2로 상자를 열면 바로 사용할 수 있는 이 프로젝트와 비교해 볼 수 있습니다.내가 먼저 내가 원하는 서류를 볼게.

프로젝트 파일

Vue 사용자로서 Vue가 작동하고 페이지에 표시되는 세 가지 중요한 파일은 다음과 같습니다.

색인.html

메인 파이프.js

응용 프로그램.vue.

먼저 이 파일들을 검토해서 Vue 2와 Vue 3 사이에 뚜렷한 변화가 있는지 살펴보겠습니다.화면 캡처에서 CLI에서 만든 프로젝트의 파일 구조는 Vue 2와 Vue 3에 대해 동일합니다.그러나 만약 우리가 위 목록에 열거된 세 개의 파일을 깊이 연구한다면 우리는 약간의 변화를 발견할 수 있을 것이다.

색인html

가장 기본적인 웹 페이지(Vue 프로젝트뿐만 아니라)를 구축할 때도 색인이 나타납니다.html 파일은 기본 시작 페이지로 사용되는 파일로 우리가 페이지에서 본 내용의 기본 구조(기본 html 구조)를 제공합니다.
색인입니다.Vue 2 프로젝트를 사용하여 만든 html 파일입니다.흥미로운 것은 이 파일이 Vue 3 항목에서 완전히 같다는 것이다.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

이 문서는 매우 중요하다. 이것이 바로 내가 본능적으로 그것을 검사해서 Vue 2와 Vue 3 사이에 어떤 변화가 있는지 보는 이유이다.
색인html 파일에는 setup()가 있는 div 요소가 포함되어 있으며, Vue는 프로그램이 DOM에 불러올 수 있도록 이 요소를 어떻게 보는지 알고 있습니다.

<div id="app"></div>

Vue id="app"는 모든 Vue 파일을 주입하는 엔트리 포인트로 사용됩니다.이러한 Vue 파일에서 Vue의 마력이 발생했지만 첫 번째 입구점div이 Vue 코드를 메인 HTML 페이지에 넣었다.
이 파일은 Vue 2와 Vue 3 항목에서 모두 같기 때문에 적어도 이 방면에서 Vue 2와 Vue 3은 같은 방법으로 Vue 파일을 DOM에 넣는다. 색인에서 검색한다. div.html 파일, div을 찾으면 Vue 응용 프로그램이 이 특정 요소에 추가됩니다.

매인.js

주요했어Vue 프로젝트의 js 파일은 Vue 실례 자체가 초기화된 곳입니다.(Vue 응용 프로그램은 숨겨진 Javascript 대상입니다. 각각의 독특한 Vue 항목은 Vue 대상의 실례적인 대상입니다. 이것은 Vue가 정상적으로 작동할 수 있도록 하는 속성과 방법을 계승합니다.)
Vue 2에서 애플리케이션 초기화는 다음과 같습니다.

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App),
}).$mount('#app')

그러나 Vue 3에서는 다음과 같이 표시됩니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

이것은 분명히 매우 큰 변화다.두 가지를 알고 싶어서 먼저 Vue 2에서 무슨 일이 일어났는지 설명한 다음에 이를 Vue 3과 비교할 것이다.

Vue 2
먼저 Vue 2에서 무슨 일이 일어났는지 살펴보겠습니다.나는 이 두 가지 중요한 견해에 주의를 기울였다.

import Vue from 'vue'
import App from './App.vue'

Vue 구조 함수는 Vue의 새 인스턴스를 생성하는 데 사용할 수 있도록 Vue에서 가져와야 합니다.프로그램도 가져옵니다. (프로젝트의 App.vue 파일입니다.) 루트 vue 구성 요소가 필요하기 때문에, 모든 vue 코드가 이 구성 요소에 저장됩니다.내가 앞으로 구축한 모든 하위 구성 요소는 이 프로그램 파일을 통해 프로젝트에 들어갈 것입니다.
이어서 Vue 2 main 에서 이 점을 보았습니다.js 파일:

new Vue({
  render: (h) => h(App),
}).$mount('#app')

이것은 사용 중인 Vue 구조 함수입니다.div Vue 객체의 새 인스턴스를 작성합니다.하나의 대상이 구조 함수new Vue()에 전달되고 이 구조 함수는options 대상이라고 불린다.이것이 바로 Vue 2가 때때로 옵션 API라고 불리는 이유입니다. (옵션 API는 Vue 2의 일부분이지만.)옵션은 데이터, 메서드, 마운트, 컴퓨팅 등의 속성입니다.
다음 줄에서 봤어요Vue({...}).render 속성은 Vue가 구성 요소를 HTML ((render: h => h(App) 로 표시하는 것이 사실상 Vue 옵션 API의 일부분임을 알려 줍니다.관심 있으면 this article에서 왜 사용했는지render에 대한 내용을 더 많이 읽을 수 있습니다.응용 프로그램의 코드.vue 구성 요소 파일은 이 렌더링 함수에 전달되기 때문에 HTML로 구축됩니다. (vue가 신기한 역할을 발휘하고 있는 다른 것들도 있습니다.)
$mount 메서드는 Vue 인스턴스의 마운트를 수동으로 시작할 수 있는 기본 Vue 메서드입니다.

Vue 3
Vue 3에서 봤어요.js 파일은 매우 다르게 보입니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

이것은 코드가 많이 없어진 것 같다.내가 본 것은 Vue 대상의 실례를 만들기 위해 구조 함수를 가져오는 것이 아니라 h 이라는 함수를 가져오는 것이다.나를 놀라게 한 것은 초기화는 코드 한 줄만 있으면 된다는 것이다. createApp비록 여기는 뚜렷하지 않지만 createApp(App).mount('#app') 함수는 실제로는 여전히 함수 내부에서 createApp 구조 함수를 사용한다.현재 차이점은 Vue 인스턴스를 복사한 것입니다.이 Vue 인스턴스의 모든 사용에 영향을 주고 전역 상태가 변경되는 구성 옵션을 직접 추가하는 대신 new Vue() 개별적으로 구성할 수 있는 복제본을 생성합니다.함수에 캡슐화하여 별도의 Vue 인스턴스를 만들 수 있으며 각 인스턴스의 구성에 영향을 주지 않습니다.
필요한 경우 개별적으로 구성된 두 개의 Vue 객체를 쉽게 작성할 수 있으므로 향상된 기능입니다.다음은 이 작업을 수행하는 설정의 예입니다.

import GlobalApp from './App.vue'

//Create one Vue app using same global app file and add unique configuration
const app1 = Vue.createApp(GlobalApp)

app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalPlugin)

//Create second Vue app using same global app file and add unique configuration
const app2 = Vue.createApp(GlobalApp)

app.component('Modal', ModalComponent)
app.directive('toolip', TooltipDirective)
app.use(DifferentPlugin)

이것은 왜 쓸모가 있습니까?나는 가능한 상황만 상상할 수 있다.만약에 Vue를 사용하는 서로 다른 단체가 같은 메인 응용 프로그램 파일을 구축하려고 하지만 그들 자신의 옵션, 플러그인, 기능 등을 추가하거나 핵심을 구축한 다음에 서로 다른 경로에서 서로 다른 설정이 어떻게 작동하는지 볼 수 있다.
어떤 이유로든 이 능력을 가지면 뷰는 더 좋아진다.

응용 프로그램.vue

마지막으로 보고 싶은 파일은 프로그램입니다. 차이가 있는지 확인하십시오.vue 파일.
응용 프로그램.vu 파일은 루트 구성 요소입니다. 프로그램이 색인에 있는 DOM 요소를 불러올 때 vu 코드의 시작점입니다.html 파일.
응용 프로그램을 비교한 후에vue 2와 응용 프로그램의 vue.vue 3에서 나는 단지 하나의 차이점을 보았는데 그것이 바로 템플릿 블록이었다.
다음은 Vue 2 애플리케이션입니다.vue 템플릿:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

Vue 3 애플리케이션입니다.vue 템플릿:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

나는 템플릿에 주위의 뿌리div가 더 이상 필요하지 않다는 것을 놀랍게 발견했다.우리는 더 이상 뿌리 원소를 필요로 하지 않는다. 예를 들어 다음과 같다.

<template>
  <div id="app">...</div>
</template>

Vue 2에서는 템플릿의 직접 하위 요소인 루트 요소를 제공해야 하지만 현재 Vue 3에서는 여러 개의 직접 하위 요소, 즉 여러 개의 루트 요소를 사용할 수 있습니다.이것은 모든 구성 요소의 HTML 코드에 나타나는 추가 div를 제거합니다.
단, 이것은 구성 요소에 비prop 속성을 설치하고 Vue 2의 단일 루트 요소가 아닌 여러 루트 요소를 사용하면, 이 속성은 현식 bind an element to those attributes 을 제외하고는 구성 요소에 나타나지 않는다는 것을 의미한다.단지 주의해야 할 일들일 뿐이다.

결론

지금까지 나는 Vue 3과 Vue 2 사이의 이러한 변화에 대해 큰 두려움을 느끼지 못했지만, 아직 진정으로 큰 영역에 진입하지는 못했다.
이 시리즈의 다음 글에서 나는 new Vue() 함수를 연구할 것이다. 이것은 아마도 이해해야 할 가장 중요한 변경일 것이다.Composition API(Vue 3과 함께 제공)와 Options API(Vue 2의 작동 방식)를 비교할 수 있는 좋은 기회가 될 것입니다.
만약 당신이 나와 함께 Vue 3에 깊이 들어가고 싶다면, 나를 따라오세요!

Reference

이 문제에 관하여(잠입 Vue 3 - 입문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/deepgram/diving-into-vue-3-getting-started-3e44

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)