Длинная статья о 4D поможет вам полностью освоить Vue3.

Vue.js
Длинная статья о 4D поможет вам полностью освоить Vue3.

19 сентября 2020 года vue обновил официальную версию 3.0. Прежде, чем я узнал об этом, прошло несколько месяцев. Как мальчику, занимающемуся нарезкой фигурок, пора было начать учиться. Подождите, идея, о которой я расскажу завтра, уже есть. был успешно изучен в течение более двух месяцев после его выпуска Вот краткое изложение обновлений vue3, чтобы помочь друзьям, у которых нет времени разбираться в vue3, быстро начать.

Как вы относитесь к vue3?

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

Итак, давайте посмотрим на преимущества и особенности vue3 по сравнению с vue2. Удобно, что когда сообщество совершенствуется, мы можем использовать эти технологии прямо в своей работе, ведь с момента появления vue3 она привлекала внимание различных лидеров отрасли. Так что, будь то просто опыт использования vue3 в качестве инженера-разработчика API или изучение идей программирования, мы все должны понимать и учиться.Эта статья будет написана с использованием синтаксиса vue3.Ниже приведен адрес официального веб-сайта. из vue3.

  • адрес официального сайта vue3.x

  • Вы также можете перейти на официальный сайт текущей версии и нажать в левом верхнем углу, чтобы перейти на версию 3.x-beta.

Как создать проект vue3

  • Используйте последнюю официальную версию vue-cli.После обновления вам будет предложено выбрать версию при создании проекта, и вы можете выбрать версию vue3, как показано ниже:

Вам нужно только выбрать версию 3, а затем выбрать то же, что и vue2, и вы можете завершить создание проекта до зеленого света.Такой проект мало чем отличается от vue2.Он также использует веб-пакет для сборки проекта.Я Поверьте, этот способ начать работу будет очень простым, но vue3 также предоставляет еще один способ создания:

  • ВторойviteСпособ создания проекта, студенты, которые сделали большой проект, знают, что в процессе нашей локальной разработки веб-пакета каждый раз, когда вносится небольшая модификация, это требует много времени для переупаковки.Для многих крупных проектов это потребляет Это было слишком давно, и это было болевой точкой в ​​​​давно время. Поэтому vue3 родился с vite, а vite до сих пор работает на основе узла. Принцип заключается в том, что браузер уже поддерживает импорт es6, а http будет быть отправлены при импорте Запросы на загрузку файлов, vite перехватывает эти запросы, выполняет некоторую предварительную компиляцию, экономит длительное время упаковки веб-пакета, улучшает опыт разработки и делает локальную разработку более эффективной.
    • В это время некоторые люди могут спросить, полезен ли еще этот вебпак, тогда в этом нет никаких сомнений, конечно он полезен, экология первого вита не идеальна, и его стабильность пока не может быть гарантирована, а второй зависит от vite для локальной разработки. Работа по упаковке перед выходом в онлайн по-прежнему нуждается в поддержке webpack, поэтому он по-прежнему нужен webpack. Конечно, новый режим, такой как vite, все еще стоит с нетерпением ждать. Я надеюсь, что эта технология может созреть раньше, и наше местное развитие может быть более эффективным.

каталог проекта

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性最低适配版本
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不上传到git的文件进行管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

настройка() и ссылка()

vscode, используемый самим редактором, если вы хотите иметь подсказки синтаксиса vue3, вы можете скачать его в магазине vscode и использовать плагин **vue 3 snippets**.

  • Поскольку он изучает vue3, следующая грамматика будет написана на vue3.

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

Во-первых, давайте сравним синтаксические различия

  • В vue2 для реализации такой программы нужностуденческий массив,выбранный человек,Потомmethodsчтобы определить метод выбораselectStuFn
    • А вот в vue3 просто прописать все это в функции настройки.Сначала поговорим о том,что это за настройка.Это вообще функция хука жизненного цикла.По сравнению с vue2 он равен vue2.beforeCreateиcreateДве функции жизненного цикла, в vue3, он не только функция жизненного цикла, и нам нужно определить данные, методы, часы, вычисляемые атрибуты в vue2 через эту функцию, поэтому два атрибута, которые мы определили выше, и все методы определены в нем, но их все нужно вернуть в конце, и есть большая разница в способе написания.Когда мы присваиваем или берем ему значение, мы должны передать **.valueНаписать de to take или take можно увидеть на картинке выше, и в итоге он нам нужен вне зависимости от того, атрибут это или методreturn** можно использовать только после возврата
  • Определено в vue2 вdataЗначение в нем автоматически станет адаптивным, и его можно будет использовать прямо в шаблоне без каких-либо действий с нашей стороны.
    • В vue3, как показано выше, нам нужно передатьrefКлючевое слово включено, такая операция может определить его как отзывчивые данные,
    • Функция ref — это функция, которая превращает обычные переменные в Proxy.адаптивная переменнаяФункция
    • Другое использование ref может вызвать роднойDOM

По этому мыsetupиrefсделать вывод:

  1. Функция настройки на самом деле представляет собой крючок жизненного цикла, который соответствует функциям beforeCreate и create в Vue2, и этоvue3Функция входа API композиции.
  2. В vue3 мы используем эту функцию для определения данных, методов, часов, вычисляемых свойств в vue2.
  3. Функция настройки должна иметь возвращаемое значение и должна возвращать объект, который содержит все свойства, которые необходимо использовать в шаблоне шаблона (включая данные, методы и т. д.).
  4. Пройти в настройкахrefОтзывчивые данные о жизни должны передавать **.value при получении или присвоении значенияспособ получить его, ноtemplateно не нужно использовать.value**
  5. refВы также можете позвонить роднымdom
  6. setupПервый полученный параметр — это props, который используется для получения props, то есть свойств, определенных в компоненте (так же, как vue2), но полученные props должны быть сначала определены в свойстве props, иначе он не будет получен.
  7. setupВторой полученный параметрcontext, в js этот формальный параметр представляет собой контекст, он выставляет свойство компонента, он обычныйjavaScriptобъект, в котором мы можем получитьattrs,** слоты**, ** излучение** и другие атрибуты, так что я думаю, вы все знаете, что вы можете сделать.

! должны знать о том,propsэто отзывчивые данные, выНевозможно использовать деструктурирование ES6, так как это убирает отзывчивость опоры. мы можем попробоватьpropsпровестиES6Деконструкция, вы обнаружите, что консоль тревожит, поэтому структурируйтеpropsнужно использоватьsetupв функцииtoRefsЧтобы сделать это безопасно, мы поговорим об этой функции позже.

Нетрудно заметить, что для vue2 многие люди могут найти его более хлопотным и даже иметь некоторые сомнения относительно того, зачем им нужно использовать **.valueметод, но в шаблоне он не нужен. Такой способ написания кажется немного античеловеческим. Во-вторых, если мы определяем много и нужно возвращать много значений, это будет очень хлопотно, поэтому у нас есть простой способ решить это? Ну, ответ да, так что давайте посмотримvue3следующий новыйAPI**, чтобы узнать, как решить эту проблему.

использоватьreactiveоптимизатор функций

Как видно выше, метод записи относительно неудобен, давайте оптимизируем его через эту функцию и больше не будем использовать метод **.value**.

На картинке выше я использовал стрелки, чтобы указать на различия, поэтому я могу обобщить следующие пункты для вас.

  1. Больше не использоватьrefАтрибуты объявлены чувствительными, но аналогично методу записи vue2, мне нужно только определить объект данных, все атрибуты, которые я хочу, помещаются в данные, и, наконец, данные могут быть возвращены единообразно.
  2. больше не используйте **.valueВместо того, чтобы использоватьData.** удобнее для понимания, конечно, то же самое.templateТакже необходимо добавить, что лично для меня такой способ написания более понятен и понятен.
  3. Нет необходимости возвращать кучу вещей, просто возвращайте объект, а метод записи более лаконичен.

! В это время другой одноклассник спросит, оригинальноtemplateНе нужно использовать **.valueЗачем нужно добавитьdata.Теперь, разве это не более хлопотно? не могу пойтиМожет ли template** добавлять другие элементы и напрямую использовать атрибуты? Конечно.

  • Если мне нужно это сделать, некоторые ученики подумают, пока я не верну объект, можно ли вернуть атрибут? Вы правы, просто верните свойство, и вы сможете его реализовать, но как это реализовать?
    1. Некоторые студенты подумают, а не хорошо ли задавать прямую структуру?rerurn {...data}Разве это не возможно? Я вам прямо скажу, что это не работает, так почему здесь и вышеpropsТот же принцип, поскольку мы определяем адаптивные данные, если структура назначается непосредственно таким образом, это приведет к разрушению адаптивной функции, в результате чего данные больше не будут реагировать, так что нажатие кнопки не изменится. так что мы не можем таким образом.
    2. Так как же нам этого добиться? Это также очень просто, это можно сделать с помощью официально предоставленной функции **toRefs()**. Давайте снова преобразуем ее.

Функция toRefs() деконструирует функцию reavtive() и возвращает

Мы просто преобразуем его, и вы можете понять роль этого метода.

  • Таким образом, вы можете использовать его прямо в шаблоне.
  • Нетрудно представить, что этот метод должен передать свою структуру метода, не нарушая его отзывчивости, это так просто.

жизненный цикл vue3

  1. что такое жизненный цикл

    1. Vue — это компонентная разработка, а процесс компонента от рождения до смерти — это жизненный цикл компонента.
    2. Более поздние этапы жизни такие же, как от рождения до смерти, и в разное время можно делать разные вещи, это правда.

  2. Сравнение жизненного цикла между vue2 и vue3

    1. vue2 vue3 Сравнение некоторых различий между vue2 и 3
      beforeCreate setup setup() : выполняется перед beforeCreate и создается перед началом создания компонента. Созданы данные и метод
      created setup
      beforeMount onBeforeMount Функция, которая должна выполняться до того, как компонент будет смонтирован на узле.
      mounted onMounted Функция, выполняемая после монтирования компонента.
      beforeUpdate onBeforeUpdate Функция, которую необходимо выполнить перед обновлением компонента.
      updated onUpdated Функция, выполняемая после завершения обновления компонента.
      beforeDestroy onBeforeUnmount Выгружает ранее выполненные функции. переименован
      destroyed onUnmounted Функция, которая будет выполняться после удаления.
      activated onActivated Компоненты, входящие в него, будут иметь еще две функции хука жизненного цикла. Выполняется при активации.
      deactivated onDeactivated Например, переключитесь с компонента A на компонент B и выполните, когда компонент A исчезнет.
      errorCaptured onErrorCaptured Функция ловушки активируется, когда перехватывается исключение из компонента-потомка.
      onRenderTracked Новый цикл vue3 используется для разработки и отладки
      onRenderTriggered Новый цикл vue3 используется для разработки и отладки

    2. Сначала простое сравнение, мы нашли эти различия

      • vue2beforeCreateиcreateстал установкой

      • vue2destroyedиbeforDestroyсталonUnmounted: объяснение ЮдыUnmountedБолее семантически, смысл деинсталляции более нагляден, чем уничтожение vue2

      • За исключением настройки, большинство из них - это имя vue2, просто добавьте переднюю часть.on

      • Что касается функции отладки, в настоящее время в официальных документах не так много объяснений.Большинство блоггеров также очень расплывчаты в отношении этих двух функций.Проведя тест самостоятельно, я обнаружил, что эти две функции связаны с изменениями состояния компонента и могут быть Статус изменения каждого отклика данных очень упорядочен, и все они имеют событие параметра, поэтому я лично думаю, что этофункция отслеживания состояния, цель состоит в том, чтобы подготовиться к тому, чтобы увидеть процесс изменения каждого отзывчивого данных, когда мы разрабатываем локально. Конечно, официальная документация, стоящая за этим, определенно прояснит ваше замешательство.

Изменения часов Vue3 и watchEffect()

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

import {watch} from 'vue'

watch(a, (newVal, oldVal) => {
	console.log(newVal, '===', oldVal)
})

можно увидетьvue3изwatchОсновное использование изменилось, чтобы использовать часы, их нужно сначала ввести, а затем, по сути,vue3Текущий синтаксис такой же, как и введение по запросу различных UI-фреймворков, каждый из которыхAPIВсе дело в том, каким образом представить, давайте посмотрим на преимущества позже.

Затем посмотрите на синтаксис, функция wacth здесь получает два параметра, первый параметр — это значение, которое мы хотим обнаружить, а второй — функция обратного вызова, которая, как и раньше, имеет как старые, так и новые значения.

Тогда в то же время,vue3изwatchПоддерживает одновременный мониторинг нескольких значений в виде массива следующим образом:

import {watch} from 'vue'

watch([a, b], ([newValA, newValB], [oldValA, oldValB]) => {
	console.log(newValA, newValB, '===', oldValA, oldValB)
})

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

  • часы могут слушать только через **ref()определяемые методом ответные данные, черезОпределение функции reactive()** сообщит об ошибке напрямую. Давайте сначала посмотрим на сообщение об ошибке, а затем поговорим о том, почему:

  • Что означает приведенное выше сообщение об ошибке? Это говорит нам, что часы могут только слушать, 1: имеет значение свойства getter/setter. 2: Атрибут ref, то есть через **ref()заявленные данные. 3: одинОбъект, возвращаемый функцией reactive()**. 4: Массив, эти четыре способа, затем, как показано выше,data.selectPeopleОн сообщит об ошибке напрямую, потому что мы отслеживаем, что это значение не относится к четырем вышеуказанным случаям,

    • Итак, во-первых, зачем нам это нужно? Почему это нельзя контролировать? давайте сначала подумаемvue2В часах есть свойство под названиемdeepГлубокий мониторинг, зачем это? Таким образом, суть глубокого мониторинга состоит в том, чтобы решить проблему циклических ссылок, тогда мы знаем,vue2Глубокий мониторинг на самом деле решается с помощью рекурсии, что приводит к низкой производительности, поэтому официальные лица не рекомендуют использовать глубокий мониторинг, поэтому вышеуказанная проблема заключается в том, что когда вы контролируете объект или массив, передние и задние объекты являются циклическими ссылками, вы найдуnewValиoldValЗначение всегда одно и то же, поэтому возникает описанная выше ситуация.Поэтому решить указанную выше проблему очень просто.Вы можете напрямую вернуть новое значение через функцию, чтобы можно было решить справочную проблему следующим образом.

В отличие,vue3изwatchНезависимо от синтаксиса или бизнес-соображений, есть новые сценарии и больше методов использования, что делает его более гибким.

watchEffectтакжеvue3Предлагается новый API, синтаксис которого следующий:

import {watchEffect} from 'vue'
watchEffect(() => console.log(name))

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

Модульность Vue3

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

Очень просто нажать кнопку, чтобы активировать функцию отображения времени.Эффект страницы выглядит следующим образом.Я думаю, учащиеся могут легко понять:

Теперь мы хотим повторно использовать эту логику вvue2, если мы используемmixinСмешанная разработка будет повторно использовать большую часть логики кода, давайте посмотрим,vue3Что вам нужно сделать, чтобы повторно использовать эту функцию:

  • На первом этапе нам нужно только извлечь логику, которую мы написали в **setup()**, в файл ts, а затем экспортировать нужные нам методы и атрибуты.Я напрямую экспортирую здесь пакет ref().Объект, если вы хотите быть более подробным, вы также можете экспортировать данные в ref() ответа в компоненте, и это очень просто в использовании, см. следующий рисунок:

  • Мы видим, что для завершения требуется всего две части, нужно только импортировать, а затем вернуться непосредственно в **setup()**, чтобы завершить повторное использование функции.

Можно сказать,vue3В повторном использовании модуля здесь относительноvue2С очень большим улучшением такое изменение сделает модульность между компонентами чрезвычайно гибкой.Вы с нетерпением ждете такого метода написания?

Телепорт, компонент телепортации vue3

Телепорт в переводе означает телепорт, поэтому в отечественном переводе это компонент телепорта Как понимать этот компонент телепорта?

  • Все мы знаем, что лиvueилиreactВ месте html входного файла есть только один контейнер, который<div id='app'></div>, мы называем его входом, и все компоненты на странице фактически смонтированы на этом узле. Когда мы открываем веб-страницу, мы видим, что элемент управления поднят. В самом внешнем слое есть только один узел, который является этим приложение.
  • Друзья, которые написали компонент всплывающего окна или компонент подсказки сообщения, знают, что, как и этот компонент с одним глобальным состоянием, мы не хотим, чтобы он смешивался с нашими компонентами, мы хотим, чтобы он не зависел от компонента приложения. Таким образом, в большинстве отличных фреймворков пользовательского интерфейса этот тип расширенных компонентов обычно использует метод создания нового узла для извлечения узла приложения, который легче контролировать и который можно удалить даже после использования. ТакTeleoirtКомпонент на самом деле такая вещь, которая может быть независима от новых узлов вне приложения, мы все знаем файл входаindex.htmlЕсть узел app, добавляем новый app2, как показано на рисунке.

Тогда как мы будем использовать этот узел? Давайте создадим простой компонент всплывающего окна. Этот компонент тоже очень простой. Просто отобразите его в центре страницы. Давайте посмотрим на этот компонент иvue2Какая разница:

  • Мы видим, что этот компонент обернут слоемTeleportэтикетка и имеетtoсвойство, то в первую очередь нужно использовать компонент телепорта, этот тэг оборачивает, потомtoАтрибут представляет, к какому узлу я хочу подключиться.Как показано выше, мы создалиapp2Узел, который мы хотим смонтировать на этом узле, мы можем to='app2', который создает компонент телепорта, используя метод иvue2Нет никакой разницы, давайте посмотрим на фактический эффект:

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

Компонент асинхронных запросов Vue3 Suspense

Этот асинхронный компонент (Suspense) — недавно добавленный компонент vue3. В повседневной разработке незаменимой частью являются асинхронные компоненты, такие как запросы интерфейса, запросы изображений и запросы, вызванные различными асинхронными операциями. Все они относятся к асинхронным компонентам.vue2Оценка этих состояний должна оцениваться нами вручную, ноvue3Предоставьте этот очень интимный компонент. Этот китайский перевод означает ожидание. Он дает дваtemplateТо есть два слота, один то, что отображается, когда запрос не возвращается, а другой то, что отображается, когда запрос успешен. Давайте напишем один и посмотрим. Давайте сначала напишем асинхронный компонент. Это очень просто. интерфейс здесь случайный интерфейс, который возвращает изображение.

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

  • Его очень легко использовать,SuspenseКомпонент, обернутый меткой, является асинхронным компонентом.В нем предусмотрены два слота, а именно слоты успеха и отказа, и содержимое будет отображаться соответственно.Такой способ написания может облегчить нам выполнение множества избыточных суждения, да? Это тоже очень полезно

! Конечно, официальное напоминание, что это API, который все еще является функцией реализации, и он может измениться позже.Конечно, нам также нужно заранее знать, что есть такой способ написания.

Объяснение некоторых небольших знаний о Vue3

  • чтоComposition API?

    • Compositon APIЭто не API, а набор API, состоящий из многих API. Мы собирательно называем это имя. В vue2 мы будем определять свойства и методы в методах, вычисляемых, наблюдаемых, данных и т. д., чтобы совместно обрабатывать логику страницы, мы назовите этот способ какOptions API. Таким образом, когда проект слишком велик, мы обнаруживаем, чтоmethodsПри определении десятков методов вы должны быть готовы знать это, функцию и назначение каждого метода, что станет очень хлопотным иComposition APIэто решить эту проблему
    • vue3 Composition APIВ , наш код организован в соответствии с логическими функциями, и все API-интерфейсы, определенные функцией, будут объединены (более сплоченная, низкая связанность).Таким образом, даже если проект большой и имеет много функций, мы можем быстро найти все API, используемые этой функцией,

  • **ref()иКого лучше выбрать реактивный()**?

    • Этот вопрос на самом деле зависит от личных предпочтений. Можно использовать оба метода. Лично я предпочитаю метод **reactive()**. Между ними нет никакой другой разницы, кроме разницы в написании.

  • Вход vue3 принимаетcreateApp()Какая разница в пути?

    • В vue2 используется new Vue(), а в vue3 — createApp().По сути особой разницы нет.Однако до того, как мы прописали какие-то глобальные компоненты, миксины, плагины, прототипы и т.д., было бы таким образом,Vue.mixin(...xxx)Таким образом, в глобальном масштабе существует только один экземпляр приложения, что приведет к загрязнению экземпляров.В vue3 **createApp()** вернет совершенно новое приложение, что поможет избежать этой проблемы.
    • В то же время этот способ записи использует метод цепного вызова при вызове, аналогичныйkoa,expressЭти рамки одинаковы, как показано ниже:

  • Как Vue3 регистрирует глобальные компоненты?

    • app.component('componentName', component)

  • Как Vue3 регистрирует пользовательские директивы

    • /** v-snine */
app.directive('snine', {
  inserted: function (el) {
    el.snine()
  },
})

  • Как Vue3 смешивается по всему миру

    • const app = createApp(App)
app.mixin({
  beforeCreate() {
    console.log('我是全局mixin')
  },
})

  • Как Vue3 монтирует свойства и методы глобально

    • const app = createApp(App)

// 全局ctx(this) 上挂载 $axios 需要挂载在globalProperties
app.config.globalProperties.$axios = axios

  • У Vue3 все еще есть фильтры?

    • Vue3 удалил фильтр, он есть у дерева~~~

  • Можно ли совмещать жизненный цикл Vue2 и Vue3? как пользоваться?

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

  • Можно ли использовать метод записи vue2 в Vue3?

    • Vue3 принимает прогрессивную разработку и обратно совместим.То есть мы все еще можем использовать синтаксис vue2 для его завершения.Это также то, что Youda очень внимательно делает для всех, кто рассматривает возможность обновления проекта.

. . . . . .

Суммировать

Существует долгий путь изучения интерфейса.Если вы хотите программировать на зарплату, вы всегда должны пытаться изучать новые технологии, новые знания и изучать методы и идеи написания других людей.Vue3

Категории