Vue 3.0 уже здесь, что нам делать?

интервью Vue.js
Vue 3.0 уже здесь, что нам делать?

quote

Симпатичный мальчик проходит мимо, не пропустите

Все знают о выпуске Vue3.0.

Об этом я тоже узнал из рассылки круга друзей.В основном такие новости есть на блог-платформах,пабликах и кругах друзей.Видно,что Vue3.0 ждут очень долго,потому что когда React 16 был выпущен, я не видел, чтобы все были так востребованы, я был немного шокирован тем, что у Vue 1,3 миллиона пользователей, что действительно удивительно.

Vue 3.0 уже здесь, что нам делать?

  • Обучение, и быстро учиться, учиться больше не нужно учиться!
  • Притворись, что я не знаю, я счастливый страус, я не знаю, что Vue обновился, и я продолжаю ловить его.
  • По КПЭ второго полугодия вперед! Обновление версии и рефакторинг имеющегося проекта Vue.

Что нового в Vue3.0

Позвольте мне подытожить, есть еще два важных обновления (я еще не полностью испытал новую версию, и некоторые части могут быть не идеальными, я надеюсь, что вы будете терпеть меня, и я организую и поделюсь некоторыми практическими демонстрациями в будущее).

Один из них — Composition API, а другой — полная поддержка TypeScript.

Команда также выпустит версию Vue 2.7, предоставив пользователям 2.x некоторые предупреждения о методах, которые были удалены в версии 3.0, что поможет пользователям плавно выполнить обновление. Nuxt3, кажется, все еще в пути, но в настоящее время основные библиотеки компонентов на рынке не успели пересмотреть и обновить Vue3.0.

Окружающие плагины, такие как Vue-Router, Vuex, плагин VSCode Vetur и т. д., в порядке.

Что конкретно обновил Vue3.0?

Приходите к познанию мира и говорите о людях.

Ниже приводится введение в новые изменения, внесенные Vue3.0 в виде фрагментов кода.Vue2.x соответствует некоторым методам написания Vue3.0.

Элементы конфигурации приложения

config — это объект, содержащий глобальную конфигурацию приложения Vue. Перечисленные ниже свойства можно изменить перед монтированием приложения.

  • devtools тип: boolean По умолчанию: true как пользоваться: 
app.config.devtools = true

Включить ли обнаружение инструмента vue-devtools, по умолчанию это true в среде разработки и false в производственной среде.

  • errorHandler тип: Function По умолчанию: undefined как пользоваться: 
app.config.errorHandler = (err, vm, info) => {
  // info 为 Vue 在某个生命周期发生错误的信息
}

Назначьте обработчики необработанных ошибок во время рендеринга компонентов и наблюдателей.

  • globalProperties🌟тип: [key: string]: any По умолчанию: undefined как пользоваться: 
app.config.globalProperties.name = '十三'

app.component('c-component', {
  mounted() {
    console.log(this.name) // '十三'
  }
})

Если в компоненте также есть атрибут имени, авторитетность атрибута в компоненте относительно высока.

Еще одним важным моментом знания является то, что в Vue2.x мы определяем глобальное свойство или метод следующим образом:

Vue.prototype.$md5 = () => {}

В Vue3.0 мы можем определить это так:

const app = Vue.createApp({})
app.config.globalProperties.$md5 = () => {}
  • performance тип: boolean По умолчанию: false как пользоваться: 
app.config.performance = true

Установите значение true, чтобы активировать инициализацию, компиляцию, рендеринг и отслеживание производительности компонентов на панели производительности/временной шкалы инструмента разработки браузера. Работает только в режиме разработки и в браузерах, поддерживающих API Performance.mark.

Application API

Все действия для глобальных изменений находятся в экземпляре приложения, созданном createApp, следующим образом:

import { createApp } from 'vue'
const app = createApp({})

Тогда приложение имеет следующие свойства:

  • component параметр:Тип строки первого параметра представляет имя компонента, второй параметр — функция или объект.возвращаемое значение:Передается только первый параметр, и компонент возвращается. Возьмите второй параметр, чтобы вернуть экземпляр приложениякак пользоваться: 
import { createApp } from 'vue'
const app = createApp({})
// 注册一个 options 对象
app.component('shisan-component', {
  /* ... */
})

// 检索注册的组件
const ShiSanComponent = app.component('shisan-component')
  • config(упомянутый в первом абзаце выше)
  • directiveПользовательские инструкции не сильно изменились, и они такие же, как и раньше, а именно:
app.directive('my-directive', {
  // 挂载前
  beforeMount() {},
  // 挂载后
  mounted() {},
  // 更新前
  beforeUpdate() {},
  // 更新后
  updated() {},
  // 卸载前
  beforeUnmount() {},
  // 卸载后
  unmounted() {}
})

Большинство глобальных API не изменились, и большинство из них написано на старом 2.x.

Composition API

Какую проблему решает Composition API? При использовании традиционного метода конфигурации Vue2.x для написания компонентов по мере того, как сложность бизнеса становится все выше и выше, объем кода будет продолжать увеличиваться. Поскольку код связанного бизнеса должен быть написан в определенной области в соответствии с конфигурацией опции, последующее обслуживание очень сложно, а возможность повторного использования кода невысока.Вы часто найдете компонент страницы, и вы можете напиши триста или четыреста, когда напишешь.Это кажется знакомым? Правильно, это недостаток старой модели, она так долго держалась, а больше никого нет~~ И Composition API решает эту головную боль. Он предоставляет нам несколько следующих функций:

  • reactive
  • watchEffect
  • computed
  • ref
  • toRefs
  • hooks

reactive

import { reactive, computed } from 'vue'
 
export default {
 setup() {
  const state = reactive({
    a: 0
  })
   
  function increment() {
    state.a++
  }
   
  return {
    state,
    increment
  }
 }
}

Реактивный эквивалентен Vue.observable() API Vue2.x.Функция после реактивной обработки может стать ответными данными, аналогичными значению атрибута данных, определенному при написании страницы шаблона ранее.

watchEffect

import { reactive, computed, watchEffect } from 'vue'
 
export default {
  setup() {
    const state = reactive({ a: 0 })

    const double = computed(() => state.a * 3)

    function increment() {
      state.count++
    }

    const wa = watchEffect(() => {
      // 使用到了哪个 ref/reactive 对象.value, 就监听哪个
      console.log(double.value)
    })
    // 可以通过 wa.stop 停止监听
    return {
      state,
      increment
    }
  }
}

watchEffect называется побочным эффектом, он немедленно выполняет переданную функцию, реактивно отслеживает ее зависимости и повторно запускает функцию при изменении ее зависимостей.

computed

import { reactive, computed } from 'vue'
 
export default {
  setup() {
   const state = reactive({
    a: 0
   })
   
   const double = computed(() => state.a * 3)
   
   function increment() {
    state.a++
   }
   
   return {
    double,
    state,
    increment
   }
  }
}

Это более интуитивно понятно, вычисление существует в Vue2.x, но форма, используемая сейчас, изменилась, и свойства, которые необходимо вычислить, возвращаются в приведенной выше форме.

ref и toRefs

toRefs предоставляет метод для обработки реактивных значений как ссылок, то есть для обработки реактивных объектов как обычных объектов.

hooks

Хуки жизненного цикла, соответствующие версиям 2.x

Жизненный цикл Vue2.x Жизненный цикл Vue3.x
beforeCreate setup()
created setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

Vue3.0 добавляет еще два хука в Composition API, а именноonRenderTrackedиonRenderTriggered, обе функции ловушек получаютDebuggerEvent :

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}

Vue 3 уже здесь, что нам делать?

Я также пошутил ранее о трех вещах: либо притворяйтесь, что не знаете, либо быстро учитесь, и друзья, изучившие Vue 3, могут использовать его в своих собственных проектах для оптимизации и обновления проекта. Таким образом, наиболее важные из них могут быть добавлены к итоговому отчету на конец года:Взвело членов команды для завершения рефакторирования проекта, в том числе логика рефакторинга + обновление синтаксиса, полностью адаптируясь к Vue 3! Эффективность упаковки увеличивается на XX раз! Скорость ответа на странице улучшилось XX!

Мало того, для студенческой вечеринки или одноклассников, которые все еще ищут работу, им может понадобиться подготовить дополнительный контент при подготовке к собеседованию, спешить!

Наконец-то я задумался над тем, что я мог бы сделать.Невозможно сначала установить страуса, а потом его невозможно не изучить, потому что я написал проект Vue mall в первой половине года и выложил его на GitHub. веб-сайт.Эффект страницы выглядит следующим образом Показать:

newbee-mall создал репозитории кода на GitHub и в облаке внутреннего кода.Если у кого-то медленный доступ к GitHub, рекомендуется проверить проект на Gitee, и два репозитория будут синхронизированы.

Из предварительного изображения вы также должны увидеть, что это не базовая демонстрация, а реальная боевая система торгового центра Vue.js с относительно полными функциями. С момента открытия исходного кода до сегодняшнего дня многие друзья приходили ко мне и спрашивали, не адаптирую ли я Vue3 и не изменю ли исходный код проекта.

Здесь вы можете быть уверены, что я всегда отвечал, что перейду на Vue3, и код по-прежнему полностью с открытым исходным кодом. Я надеюсь, что каждый может стать звездой. Чем больше у вас энтузиазма, тем больше у меня будет мотивации для рефакторинга. проект на версию Vue3! Итак, что касается меня лично, я ждал официального выпуска Vue.js 3.0, а затем я найду время, чтобы написать этот проект практического торгового центра Vue.js с Vue3. Вы можете заказать звезду для проекта Xinbee Mall.Чем больше будет звезд, тем энергичнее я буду обновляться, хахахахаха.

Таким образом, каждый получит настоящий боевой опыт Vue3!

Если не указана перепечатка/источник, все они являются оригинальными автором.Перепечатки приветствуются, но это утверждение должно быть сохранено без согласия автора, а ссылка на исходный текст дается в видном месте на странице статьи. , в противном случае сохраняется право на юридическую ответственность.

Категории