15 분 전 vue 3.0(소결)

Vue 3 는 아직 공식 적 으로 발표 되 지 않 았 지만 알파 버 전 은 이미 발표 됐다.
공식 적 으로 는 아직 생산 환경 에서 Vue 3 를 직접 사용 하 는 것 을 추천 하지 않 지만 미리 공부 하 는 것 이 좋다.
입 으로 는 못 배 우 겠 다 며 Vue 3 문 서 를 성실 하 게 열 었 습 니 다.
프로젝트 생 성
Vue 공식 은 github 창 고 를 제공 하여 Vue 3 의 새로운 특성 을 신속하게 체험 할 수 있 습 니 다.


git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-start
cd vue3-start


npm install or yarn intall

개발 환경 준비 완료 후 시작 명령:


npm run dev

브 라 우 저 에서http://127.0.0.1:8080을 열 면 간단 한 카운터 페이지 를 볼 수 있 습 니 다.

package.json 을 엽 니 다.현재 사용 하고 있 는 vue 버 전 은:3.0.0-beta.2 입 니 다.
Vue 3 새로운 기능
Vue 3 의 디자인 목 표 는 더 빠 르 고 더 작 으 며 TypeScript 를 더 잘 지원 하 는 것 입 니 다.
일부 새로운 기능 은 다음 과 같다.
1、Composition API
2、Multiple root elements
3、Suspense
4、Multiple V-models
5、Reactivity
6、Teleport
7、Transition
8、Remove Filter
9、App configuration
1、Composition API
Vue 는 많은 사용자 들 이 Vue2.x 에서 Function Base 가 가 져 온 새로운 체험 을 즐 길 수 있 도록 Composition API 의 공식 플러그 인 을 공식 적 으로 발표 했다.
vue 3 에 서 는 플러그 인 을 따로 설치 하지 않 고 상 자 를 열 면 바로 사용 합 니 다.
App.vue 를 열 면 setup()방법 을 볼 수 있 습 니 다.


<template>
 <img src="./logo.png">
 <h1>Hello Vue 3!</h1>
 <button @click="inc">Clicked {{ count }} times.</button>
</template>

<script>
import { ref } from 'vue'

export default {
 setup() {
 const count = ref(0)
 const inc = () => {
  count.value++
 }

 return {
  count,
  inc
 }
 }
}
</script>

<style scoped>
img {
 width: 200px;
}
h1 {
 font-family: Arial, Helvetica, sans-serif;
}
</style>

Composition API 는 주로 두 가지 장점 을 제공 합 니 다.
1.뚜렷 한 코드 구조
2.중복 논리 제거


<template>
 <div class="counter">
 <p>count: {{ count }}</p>
 <p>NewVal (count + 2): {{ countDouble }}</p>
 <button @click="inc">Increment</button>
 <button @click="dec">Decrement</button>
 <p> Message: {{ msg }} </p>
 <button @click="changeMessage()">Change Message</button>
 </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
 setup() {
 /* ---------------------------------------------------- */
 let count = ref(0)
 const countDouble = computed(() => count.value * 2)
 watch(count, newVal => {
  console.log('count changed', newVal)
 })
 const inc = () => {
  count.value += 1
 }
 const dec = () => {
  if (count.value !== 0) {
  count.value -= 1
  }
 }
 /* ---------------------------------------------------- */
 let msg= ref('some text')
 watch(msg, newVal => {
  console.log('msg changed', newVal)
 })
 const changeMessage = () => {
  msg.value = "new Message"
 }
 /* ---------------------------------------------------- */
 return {
  count,
  inc,
  dec,
  countDouble,
  msg,
  changeMessage
 }
 }
}
</script>

Composition API 를 사용 하 는 것 을 좋아 하지 않 는 다 면 2.x 의 전통 적 인 방법 을 계속 사용 할 수 있 습 니 다.


<template>
 <div class="counter">
 <p>count: {{ count }}</p>
 <p>NewVal (count + 2): {{ countDouble }}</p>
 <button @click="inc">Increment</button>
 <button @click="dec">Decrement</button>
 <p> Message: {{ msg }} </p>
 <button @click="changeMessage()">Change Message</button>
 </div>
</template>
<script>
export default {
 data() {
 return {
  count: 0,
  msg: 'some message'
 }
 },
 computed: {
 countDouble() {
  return this.count*2
 }
 },
 watch: {
 count(newVal) {
  console.log('count changed', newVal)
 },
 msg(newVal) {
  console.log('msg changed', newVal)
 }
 },
 methods: {
  inc() {
  this.count += 1
 },
 dec() {
  if (this.count !== 0) {
  this.count -= 1
  }
 },
 changeMessage() {
  msg = "new Message"
 }
 }

}
</script>

위의 두 단락 코드 는 효과 가 완전히 등가 로 출시 되 었 다.
Composition API 를 사용 하 는 장점:코드(state,methods,computed properties,watcher 등)를 잘 구성 할 수 있 습 니 다.
구성 요소 규모 가 증가 함 에 따라 우리 의 업무 코드 를 어떻게 조직 하 느 냐 가 점점 중요 한 문제 가 되 었 고 새로 들 어 온 개발 자 들 이 코드 를 쉽게 이해 할 수 있 도록 확보 하 는 데 시간 이 많이 걸 리 지 않 습 니 다.
이전에 우 리 는 mixin 을 사용 하여 코드 를 재 활용 할 것 이다.그러나 mixin 의 가장 큰 통 증 은 서로 다른 구성 요소 의 상태 와 방법 을 추적 해 야 한 다 는 것 입 니 다.이것 은 개발 에 어느 정도 심리 적 부담 을 줄 수 있 습 니 다.조심 하지 않 으 면 mixin 은 구성 요소 의 기 존 상태 나 방법 을 덮어 쓸 수 있 습 니 다.
Composition API 를 사용 하여 코드 재 활용 을 더욱 쉽게 합 니 다.
우 리 는 똑 같이 중복 기능 의 코드 를 추출 할 수 있다.


// message.js
import { ref, watch } from "vue";
export function message() {
 let msg = ref(123);
 watch(msg, (newVal) => {
 console.log("msg changed", newVal);
 });
 const changeMessage = () => {
 msg.value = "new Message";
 };
 return { msg, changeMessage };
}

다른 구성 요소 에서 위 구성 요 소 를 사용 합 니 다:


<template>
 <div class="counter">
 <p>count: {{ count }}</p>
 <p>NewVal (count + 2): {{ countDouble }}</p>
 <button @click="inc">Increment</button>
 <button @click="dec">Decrement</button>
 <p>Message: {{ msg }}</p>
 <button @click="changeMessage()">change message</button>
 </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
 setup() {
 let count = ref(0)
 const countDouble = computed(() => count.value * 2)
 watch(count, newVal => {
  console.log('count changed', newVal)
 })
 const inc = () => {
  count.value += 1
 }
 const dec = () => {
  if (count.value !== 0) {
  count.value -= 1
  }
 }
 let { msg, changeMessage } = message()
 return {
  count,
  msg,
  changeMessage,
  inc,
  dec,
  countDouble
 }
 }
}
</script>

2、Multiple root elements
Vue 2 에서 tempalte 는 하나의 요소 만 가 져 올 수 있 습 니 다.비록 우리 가 두 개의

태그 만 있 더 라 도,우 리 는 그것 을 하나의

태그 에 포함 시 켜 야 합 니 다.


<template>
 <div class="counter">
 <p> Count: {{ count }} </p>
 <button @click="increment"> Increment </button>
 <button @click="decrement"> Decrement</button>
 </div>
</template>

컴 파일 이 통 과 될 수 있 도록 우 리 는 보통 하나의 노드 를 추가 합 니 다.
이 디자인 은 정말 엉망 이 었 다.나 는 일찍이 이 디자인 에 대해 수 차례 토로 한 적 이 없다.불필요 한 코드 삽입 과 들 여 쓰기 가 져 오기 때문이다.
다행히 Vue 3 에서 이 제한 을 취 소 했 습 니 다.
에서 임의의 탭 을 사용 할 수 있 습 니 다:


<template>
 <p> Count: {{ count }} </p>
 <button @click="increment"> Increment </button>
 <button @click="decrement"> Decrement </button>
</template>

VScode 로 템 플 릿 을 열 때 일부 lint 오 류 를 보 았 습 니 다.이것 은 공식 플러그 인 eslint-plugin-vue 가 새로운 템 플 릿 문법 을 지원 하지 않 기 때 문 입 니 다.
3、Suspense
Suspense 는 Vue 3 의 새로운 특성 입 니 다.
일반적으로 전후 단 상호작용 은 비동기 적 인 과정 입 니 다.기본적으로 저 희 는 불 러 오 는 애니메이션 을 제공 합 니 다.데이터 가 돌아 올 때 v-if 를 사용 하여 데이터 디 스 플레이 를 제어 합 니 다.
Suspense 의 등장 은 이 과정 을 크게 간소화 시 켰 다.default 와 fallback 두 가지 상 태 를 제공 했다.


<template>
 <Suspense>
 <template #default>
  <div v-for="item in articleList" :key="item.id">
  <article>
   <h2>{{ item.title }}</h2>
   <p>{{ item.body }}</p>
  </article>
  </div>
 </template>
 <template #fallback>
  Articles loading...
 </template>
 </Suspense>
</template>
<script>
import axios from 'axios'
export default {
 async setup() {
 let articleList = await axios
  .get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
  console.log(response)
  return response.data
  })
 return {
  articleList
 }
 }
}
</script>

4、Multiple v-models
우 리 는 모두 v-models 가 양 방향 데이터 바 인 딩 에 사용 되 는 것 을 안다.일반적으로 폼 요소 와 함께 사용 합 니 다.때때로 우 리 는 사용자 정의 구성 요소 에서 그것 을 사용 합 니 다.
Vue 2 는 한 구성 요소 에 만 v-model 을 사용 할 수 있 습 니 다.Vue 3 에 서 는 임의의 v-model 을 맞 춤 형 구성 요소 에 연결 할 수 있 습 니 다.


<template>
 <survey-form v-model:name="name" v-model:age="age">
 {" "}
 </survey-form>
</template>
SurveyForm.vue:
<template>
 <div>
  <label>Name: </label>
  <input :value="name" @input="updateName($event.target.value)" />
  <label>Age: </label>
  <input :value="age" @input="updateAge($event.target.value)" />
 </div>
</template>
<script>
 export default {
  props: {
  name: String,
  age: Number
  },
  setup(props, { emit }) {
  const updateName = value => {
   emit('update:name', value)
  }
  const updateAge = value => {
   emit('update:age', +value)
  }
  return { updateName, updateAge }
  }
 }
</script>

5、Reactivity
Vue 2 의 응답 식 은 이미 매우 좋 지만 소수의 경우 에 문제 가 존재 할 수 있 습 니 다.


<template>
 <div class="hello" @click="test">test {{list }} {{ myObj }}</div>
</template>
<script>
export default {
 name: "HelloWorld",
 data() {
 return {
  list: [1, 2],
  myObj: { name: "Preetish" }
 };
 },
 watch: {
 list: {
  handler: () => {
  console.log("watcher triggered");
  },
  deep: true
 }
 },
 methods: {
 test() {
  this.list[2] = 4;
  this.myObj.last = "HS";
  delete this.myObj.name;
 }
 }
};
</script>

우 리 는 this.list 아래 표 시 를 통 해 요 소 를 수정 하고 wacher 감청 함 수 를 촉발 하지 않 는 다 는 것 을 발 견 했 습 니 다.목적 을 달성 하기 위해 서 는 vue.set()또는 vue.delete()를 사용 해 야 합 니 다.
vue 3 에서 우 리 는 다른 API 를 빌 릴 필요 가 없다.


export default {
 setup() {
 let list = ref([1, 2]);
 let myObj = ref({ name: "Preetish" });
 function myFun() {
  list.value[3] = 3;
  myObj.value.last = "HS";
  delete myObj.value.name;
 }
 return { myFun, list, myObj };
 },
};

6、Portals
Portals 는 구성 요 소 를 페이지 의 임의의 DOM 노드 에 렌 더 링 하 는 능력 을 제공 합 니 다.Vue 2 에 서 는 포 털-vue 의 제3자 플러그 인 을 이용 하여 이 를 실현 합 니 다.
vue 3 에서 직접 사용:


<Teleport to="#modal-layer">
 <div class="modal">hello</div>
</Teleport>
<Teleport>   vue3                Portals。
<Teleport> </Teleport>            to       ：
<div id="modal-target"></div>

지금까지는 알파 버 전에 서 사용 할 수 없습니다.
7、Transition
전에 저 는 v-enter-active,v-enter,v-enter-to 등 상 태 를 사용 할 때 정신 이 없 었 습 니 다.
현재 Vue 3 는 이름 에서 더욱 직관 적 이다.v-enter 는 v-enter-from 이 되 었 고 v-leve 는 v-leve-from 이 되 었 다.
8、Remove Filter
Vue 3 는 Filter 의 용법 을 버 리 고 속성 이나 방법 을 계산 하여 실현 하 는 것 을 추천 합 니 다.


<!-- vue 2.x -->
{{ date | format }}

<!-- vue 3.0 -->
{{ format(date) }}

9、App configration
Vue 2 에서 use(),mixin(),directive()등 을 사용 하려 면 전역 Vue 대상 에 맞 춰 야 합 니 다.


import Vue from "vue";
import App from "./App";

Vue.use(/* ... */);
Vue.mixin(/* ... */);
Vue.component(/* ... */);
Vue.directive(/* ... */);

new Vue({
 el: "#app",
 template: "<App/>",
 components: {
  App,
 },
});

Vue 3 에서 createApp 에서 되 돌아 오 는 Vue 인 스 턴 스 로 변경 되 었 습 니 다.


import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use(/* ... */);
app.mixin(/* ... */);
app.component(/* ... */);
app.directive(/* ... */);

app.mount("#app");

종결 어
한 마디 로 하면 Vue 3 는 간단 한 방식 으로 코드 를 조직 하고 공유 하 며 강력 한 TypeScript 지원 을 제공 합 니 다.새로운 코드 조직 방식 은 미래의 응용 개발 에 큰 영향 을 줄 것 입 니 다.
또한 Suspense,여러 v-model 등 다른 특성 도 개발 에 큰 편 의 를 가 져 다 줄 것 이다.
동시에 성능 이 빠 르 고 부피 가 작다.그것 이 어떻게 했 는 지 제 가 쓴 다른 글 을 참고 하 세 요.Vue.js 작가:Vue 3.0 뒷이야기
15 분 동안 vue 3.0(소결)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 3.0 입문 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Ngnix 빠 른 입문

기능 에 있어 Nginx 는 우수한 웹 서비스 소프트웨어 일 뿐만 아니 라 ， 역방향 대리 와 부하 균형 에 있어 유명한 LVS Haproxy 등 전문 대리 소프트웨어 도 가지 고 있 지만 Nginx 의 배 치 는 ...

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

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

15 분 전 vue 3.0(소결)

좋은 웹페이지 즐겨찾기