Vue 3 официально запущен, и большинство людей хотят опробовать новую функцию. Если вам тоже не терпится поиграть с ним. Здесь я создаю простое приложение, которое вы можете попробовать и лучше понять.

На изображении ниже показано, как разработчики, переходящие с Vue 2 на Vue 3, быстро увеличивают количество Google Trend, а красная линия указывает на 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(() => {
      // ... 
    })
  }
}

«Если вы не знаете, куда идете, вы окажетесь в другом месте». - Йоги Берра, бывший ловец New York Yankees

План:

Очень важно спланировать, что делает ваше приложение и насколько оно соответствует вашим ожиданиям. Как только вы узнаете, что он должен делать. Это сэкономит вам массу времени при написании кода.

Макет есть и с некоторыми основными компонентами. Вы можете проявить свое творчество, чтобы оно выглядело модно или более организованно. Таким образом, это сделано для демонстрационных целей, потому что вы всегда можете сделать что-то хорошее из небольшого кусочка. Теперь давайте начнем добавлять код для создания этого приложения.

Обсуждение дешево. Покажи мне код. Торвальдс, Линус (2000-08-25).

Код:

Из вашего app.js. Создаешь container файл и тоже помещаешь заголовок.

Перейдите в папку компонентов и создайте Container.vue.

До этого шага у вас уже есть очень быстрый и хороший проект. Создайте Todo списки, чтобы вы могли видеть, как отображаются все нужные вам списки.

Невероятный! На создание приложения у вас уходит менее 5 минут, и вы получаете простое приложение для задач с помощью функции Vue 3. Тем не менее, это приложение не требует сложных идей. Вы заметили ключевое слово ref, оно похоже на data. Если вы раньше использовали React, он должен быть вам знаком.

Надеюсь, вам понравилось и вы узнали больше о Vue 3. Этот демонстрационный проект также можно найти на V ue3-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/