Vue3 против Vue2

внешний интерфейс Vue.js

Я использую vue2 в течение нескольких лет.После выхода vue3 я сразу же зашел на официальный сайт, чтобы изучить и использовать его.Вот некоторые из моих собственных идей.

1. Зачем нужен vue3

Мы часто сталкиваемся с некоторыми неприятными ситуациями при использовании vue2, такими как:

  1. С ростом функций и увеличением спроса код сложных компонентов становится все труднее поддерживать, а логика хаотична.Хотя vue2 тоже имеет некоторые методы повторного использования, есть определенные недостатки.Например, Mixin мы Часто использование особенно склонно к именованию.Конфликт, намерение открытой переменной не очень очевидно, и легко конфликтовать при повторном использовании в других компонентах.

  2. Vue2 имеет очень ограниченную поддержку typeScript и не учитывает интеграцию ts.

Появление vue3 должно решить недостатки vue2.Его составной API очень хорошо решает проблему логического повторного использования, а исходный код vue3 написан на ts, и поддержка ts очень хорошая. Мы можем использовать благословение ts в процессе разработки проекта, чтобы сделать код более надежным.

2. Преимущества vue3

  1. vue3 поддерживает большинство функций vue2 и совместим с vue2.
  2. vue3 контрастирует со значительным улучшением производительности vue2
    • Уменьшение размера упаковки на 41 %
    • Начальный рендеринг на 55% быстрее, обновление на 133% быстрее
    • 54% сокращение использования памяти
  3. Композиционный API vue3 реализует логическую модульность и повторное использование.
  4. Добавлены новые функции, такие как компоненты телепорта, глобальная модификация и оптимизация API и т. д.

3. Различия в принципах реагирования

Vue2.x реализует принцип двусторонней привязки данных, который заключается в чтении и изменении в соответствии с конкретным ключом через Object.defineProperty es5. Среди них метод установки реализует перехват данных, а метод получения реализует модификацию данных. Но вы должны сначала знать, какой ключ вы хотите перехватить и изменить, поэтому vue2 ничего не может сделать с новыми свойствами, такими как невозможность отслеживать добавление и удаление свойств, изменения индекса и длины массива, решение для vue2 заключается в использовании Vue.set(object, propertyName, value) для добавления реактивности к вложенным объектам.

Vue3.x использует более быстрый собственный прокси-сервер ES2015 вместо Object.defineProperty. Прокси можно понимать как настройку уровня «перехвата» перед объектом, и доступ к объекту из внешнего мира должен сначала пройти этот уровень перехвата, поэтому он обеспечивает механизм фильтрации и перезаписи доступа к внешнему миру. Прокси может напрямую прослушивать объекты вместо свойств и возвращать новый объект с лучшей реактивной поддержкой.

4. Различия в жизненном цикле

beforeCreate -> используйте setup()

создано -> используйте setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

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

5. Различия в структуре каталогов проекта по умолчанию

vue3 удалил каталог файлов конфигурации, папки config и build, удалил статическую папку, добавил общедоступную папку и переместил index.html в общедоступный, а также добавил папку представлений в папку src для компонентов просмотра категорий и общих компонентов.

6. vue3 оптимизация глобального API

В Vue3 как глобальные, так и внутренние API были реорганизованы с учетом поддержки древовидной структуры. Таким образом, глобальный API теперь доступен только как именованный экспорт сборок модулей ES.

import { nextTick } from 'vue'
nextTick(() => {
  // 一些和DOM有关的东西
})

входной файл

// vue2写法
// vue2全局配置的修改，会修改Vue对象的属性
// 在不同的app中，共享一份有着不同配置的Vue对象，也变得非常困难
import Vue from 'vue'
import App from './App.vue'
Vue.config.xx=xx
Vue.use(...)
Vue.mixin(...)

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

// vue3写法
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(APP) // 创建一个app实例
app.config.xx=xx  // 在实例上修改配置，不会发生冲突
app.use(...)
app.mixin(...)
app.mount('#app')

7. Дополнительная информация

  1. исходный код vue3
  2. официальный сайт vue3
Категории