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/