Vue 3는 공식적으로 출시되었으며 대부분의 사람들은 새로운 기능을 사용해 보고 싶어합니다. 가지고 놀기에도 가렵다면. 여기서는 여러분이 사용해보고 더 잘 이해할 수 있도록 간단한 앱을 만듭니다.
아래 이미지는 구글 트렌드에서 Vue 2에서 Vue 3로 넘어가는 개발자가 급증했을 때의 모습으로, Vue 3을 나타내는 빨간색 선과 파란색 선이 Vue 2 사용자가 적극적으로 참여하고 있는 모습입니다.

프로젝트 설정

최신 vue-cli 설치

npm install -g @vue/cli

그런 다음 아래 명령을 사용하여 첫 번째 프로젝트를 만듭니다.

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Vue3의 수명 주기 후크

새로운 Vue 3에서는 이러한 수명 주기 키워드가 변경되었습니다. 그러나 여전히 달성하려는 작업을 수행합니다. 수명 주기 후크의 다이어그램을 보여 드리겠습니다.

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

"어디로 가는지 모른다면 결국 다른 곳으로 가게 될 것입니다."- Yogi Berra, 전 뉴욕 양키스 포수

계획:

앱이 수행하는 작업과 기대하는 기능을 제공하는 방법을 계획하는 것이 매우 중요합니다. 일단 당신이 그것이 무엇을 해야 하는지를 안다면. 코딩으로 많은 시간을 절약할 수 있습니다.



레이아웃은 밖에 있고 몇 가지 기본 구성 요소가 있습니다. 창의력을 발휘하여 화려하거나 더 체계적으로 보이도록 만들 수 있습니다. 따라서 이것은 작은 조각에서 항상 큰 일을 할 수 있기 때문에 데모용입니다. 이제 이 앱을 만들기 위한 몇 가지 코드를 입력해 보겠습니다.

Talk is cheap. Show me the code. Torvalds, Linus (2000–08–25).

암호:

app.js에서. 컨테이너 파일을 만들고 헤더도 넣습니다.

<template>
  <h1>Vue 3 Todo App:</h1>
  <Container /> 
</template>

<script>
import Container from './components/Container';
export default {
  name: 'App',
  components: {
    Container
  }
}
</script>

<style>
#app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

구성 요소 폴더로 이동하여 Container.vue를 만듭니다.

<template>
  <div class="container">
    <input
      type="text"
      v-model="msg"
    >
    <button @click="Create">Create</button>
    <TodoList
      :TodoLists="TodoLists"
      :Delete="Delete"
    />
  </div>
</template>

<script>
import TodoList from './TodoList';
import { ref } from "@vue/runtime-core";
export default {
  components: {
    TodoList,
  },
  setup() {
    let exampleData = [
      { id: 1, name: 'cooking' },
      { id: 2, name: 'eating' },
      { id: 3, name: 'dancing' },
    ];
    return {
      TodoLists: ref(exampleData)
    };
  },
  methods: {
    Create() {
      let id = 4;
      id += 1;
      const next = { id, name: this.msg };
      this.TodoLists.push(next);
    },
    Delete(idx) {
      this.TodoLists = this.TodoLists.filter((r) => r.id !== idx);
    }
  }
}
</script>

이 단계까지는 매우 빠르고 좋은 프로젝트가 이미 생성되어 있습니다. 필요한 모든 목록이 렌더링되는 것을 볼 수 있도록 Todo 목록을 생성합니다.

<template>
  <ul>
    <li
      v-for="(todolist, index) in TodoLists"
      :key="index"
    >
      <span class="name">{{todolist.name}}</span>
      <span
        class="delete"
        @click="Delete(todolist.id)"
      >x</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    TodoLists: Array,
    Delete: Function
  },
}
</script>

믿을 수 없는! 앱을 만드는 데 5분도 채 걸리지 않으며 Vue 3 기능을 경험하면 간단한 할 일 앱을 얻을 수 있습니다. 하지만 이 할일 앱은 복잡한 아이디어가 많이 필요하지 않습니다. ref 키워드는 data 와 유사합니다. 이전에 React를 사용해 본 적이 있다면 익숙할 것입니다.
Vue 3에 대해 더 많이 배우고 즐기셨기를 바랍니다. 이 데모 프로젝트는 Vue3-Todo에서도 찾을 수 있습니다.
참조:
https://v3.vuejs.org/api/application-config.html
https://v3.vuejs.org/guide/introduction.html
https://github.com/vuejs/vue-next/releases/tag/v3.0.0?ref=madewithvuejs.com
https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/