Заметки об исследовании Vue3.0

Vue.js
Заметки об исследовании Vue3.0

Почему Vue3.0

  1. Поддержка TypeScript в Vue2.0 недостаточно дружелюбна
  2. В Vue2.0 метод примесей недостаточно гибкий и удобный, чтобы использовать метод примесей при повторении повторного использования логики с адаптивными данными. В API параметров вы можете видеть, что несколько логик обработки задействованы в данных, методах, вычислениях и наблюдениях и смешиваются вместе. Composition API был временно преобразован в «composition API», и каждая логика обработки может стать модулем для предоставления API внешнему миру. Эти модули похожи на обычные модули ES6, но используют реактивные данные или встроенные методы Vue3.0. Таким образом, когда нам нужно использовать определенную логику, нам нужно только объединить эти модули. В то же время при модификации логики необходимо модифицировать только соответствующий модуль.

Новые возможности Vue3.0

Адрес официального сайта Vue3.0:v3.vuejs.org/

ответ данных

Мы знаем, что принцип отзывчиваемости данных объекта до Vue3.0 является объектом.defineProperty (), а отзывчивый принцип массива - перехватить 7 методов массива (включая толчок, поп, сдвиг, нерешитель, сращивание, сортировка, обратное). Проблема с этим способом заключается в том, что для объектов мы не можем напрямую обнаружить добавление и удаление свойств; для массивов мы не можем обнаружить непосредственно изменение контента, соответствующего индивидуальному изображению массива и использование длины для изменения длины массива.

Принцип реакции данных VUE3.0 заключается в использовании реализации прокси. Прокси официально выпущен в спецификации ES2015. Он имеет «перехват» перед целевым объектом, а внешний мир доступен для объекта, поэтому он должен сначала перехватить этот слой, поэтому предусмотрен механизм, который может фильтровать внешний мир , И переписать.

  • Прокси может прослушивать объекты напрямую, а не свойства. Следовательно, добавление и удаление свойств объекта также можно отслеживать.
  • Прокси может напрямую отслеживать изменения в массиве. Следовательно, содержимое и длина нижнего индекса, непосредственно измененного массивом, также можно контролировать.
  • Прокси имеет целых 13 методов перехвата, не ограничиваясь apply, deleteProperty, has и т.д.

алгоритм сравнения

По сравнению с оптимизацией алгоритма сравнения в Vue2.0 добавлен статический анализ, а узлы разделены на статические и нестатические узлы. Статический узел относится к узлу, который не привязан к реагирующим данным. Единицей алгоритма сравнения в Vue 2.0 является компонент. В Vue 3.0 шаблон рендеринга компонента делится на блоки «блоки» в соответствии с не -static nodes, diff Единицей алгоритма является блок, а рендеринг связан только с количеством динамического контента, а не статического контента. Независимо от того, насколько глубоко вложен уровень, его динамические узлы напрямую связаны с корневым узлом блока, и нет необходимости проходить через статические узлы.

Дружелюбная поддержка TypeScript

Все сказали хорошо.

Позволяет компоненту иметь несколько корневых узлов

Используя Фрагмент, компонент может иметь несколько корневых узлов. Фрагмент «фрагментирует» виртуальные элементы, которые не преобразуются в html.

<template>
  <div>Hello</div>
  <div>World</div>
</template>

Composition API

повышение производительности

  • Реализация виртуального дома была переписана (и совместимость гарантирована, и есть большой спрос на рендеринг из шаблонов).
  • Оптимизация скомпилированного шаблона.
  • Более эффективная инициализация компонентов.
  • Скорость обновления повышается в 1,3~2 раза.
  • Скорость SSR увеличена в 2~3 раза.

Tree shaking support

Встряска дерева поддерживается лучше.Во многих случаях нам не нужны все функции, предоставляемые vue.В vue 2 нет возможности их исключить, но 3.0 может быть введен по требованию.

zhuanlan.zhihu.com/p/134302690
zhuanlan.zhihu.com/p/191216161

Создать проект

Вите путь

После локальной установки node.js создайте проект с помощью следующей команды:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Метод командной строки

Сначала обновите наш Vue-Cli глобально

$ npm install -g @vue/cli

Создайте проект с помощью команды Vue-Cli:

$ vue create cli-demo

Вы также можете настроить каждую конфигурацию в соответствии с конфигурацией по умолчанию. Здесь мы выберем вариант, поддерживающий TypeScript.

Мы также можем использовать его, загрузив CDN или загрузив Vue3.0 в Webpack. ПодробностиV3.v UE JS.org/Gui/INSHe…

Сравнение упаковки Vite и Webpack

Vite — это инструмент для упаковки, написанный самим You Dashen.Давайте посмотрим на характеристики Vite:

  • быстрый холодный пуск
  • Мгновенное горячее обновление модуля
  • Настоящая компиляция по запросу

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

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

На следующем рисунке представлена ​​информация о ресурсах, запрошенная проектом Vite:На следующем рисунке показана информация о запросе ресурсов после запуска проекта webpack:Из сравнения видно, что проект Vite напрямую запрашивает файлы кода нашего проекта, а веб-пакет запрашивает упакованные и скомпилированные файлы. Поэтому Vite очень быстро запускается, а также динамически компилируется по требованию. Метод компиляции по требованию значительно сокращает время компиляции, чем сложнее проект и чем больше модулей, тем очевиднее преимущества Vite.

Принцип: Vite внутренне заимствует коа для запуска службы. проксировать эти модули. Перехватывая запросы и затем динамически компилируя различные типы файлов.

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

blog.CSDN.net/QQ_41499782… zhuanlan.zhihu.com/p/150083887

Резкость

Заточка ножей не режет дрова по ошибке, вот 2 полезных плагина в VSCode

ESLint


Если это не подействует после установки, вы можете создать папку .vscode в корневом каталоге проекта, а в ней создать файл settings.json со следующим содержимым:

//settings.json
{
    "eslint.validate": ["typescript"]
}

Он вступит в силу после перезапуска. Можем попробовать, случайно определить переменную, будут подсказки eslint, вот такие:

Один из них сообщает нам, что переменная a только что определена и не используется, а другой сообщает нам, что a не была переназначена и должна быть определена с помощью const. Используйте eslint, чтобы улучшить спецификацию того, как мы пишем код.

Vetur


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

Грамматика Раздел

функция настройки

Концепция Composition API была предложена в Vue3. В Vue 2.0 мы определяем компоненты через реквизиты, данные, методы и т. д. Используйте настройку для определения реактивных данных и методов в Vue3.0.

<template>
    <h3>欢迎来到我的掘金</h3>
    <button v-for="(item, key) in data.languages" :key="key" @click="selectLangFun(key)">{{item}}</button>
    <p>你选择的课程是【{{selected}}】</p>
</template>

<script lang="ts">
import { reactive, ref} from "vue";
export default {
    name: "ProgramSelect",
    setup() {
        const data = reactive({
            languages: ["Java", "Javascript", "C#"]
        });
        const selected = ref("");
        const selectLangFun = (params: number): void => {
            selected.value = data.languages[params];
        }
        return {
            data,
            selected,
            selectLangFun
        }
    }
}
  • Функция setup(props, context) на самом деле имеет два параметра, props соответствует реквизитам в Vue 2, а родительский компонент, определенный в нем, передается переменной дочернего компонента; это не отображается в функции настройки, а контекст соответствует этому объекту в Vue 2. Более конкретное использование будет представлено позже.
  • Все переменные, используемые в шаблоне шаблона, должны быть возвращены функцией установки.
  • Создайте реактивные переменные с реактивным и ref. Разница между ними заключается в том, что reactive создает отзывчивость объектных переменных, а ref используется для создания базовых типов отзывчивости.
  • Выбранная переменная, созданная ref, должна добавить значение при изменении значения. Vue3 будет динамически преобразовывать простой тип, такой как строка «hello», в объект с атрибутом value и значением «hello».
  • Все данные и методы, которые будут использоваться в шаблонах, должны быть возвращены.

toRef и toRefs

Выше мы представили некоторые основные способы использования reactive и ref.Вот несколько советов по использованию toRef и toRefs. Некоторый код будет использовать синтаксис TS, учащиеся, которые не знакомы с ним, могут сначала изучить этот блог.nuggets.capable/post/690313…

toRef

toRef() — это функция, которая возвращает объект ToRef. Синтаксис использования: const result = toRef(target, "key");

  • Объект ToRef не является объектом Ref; объект, который мы создаем с помощью функции ref(), должен быть чувствительными данными, и если данные будут изменены, они будут напрямую отражены на странице.
  • Объект ToRef не обязательно является чувствительными данными, это зависит от того, реагируют ли целевые данные.
  • Если цель является реактивным объектом (объект, созданный реактивным или ref), то результат также является реактивным объектом.
  • Функция toRef() представляет собой сопоставление с целью; при изменении содержимого результата цель также будет изменена, и наоборот, если цель изменена, содержимое результата также будет изменено.
<template>
    <p>{{a}} <button @click="changeA">changeA</button></p>
    <p>{{objRef}} <button @click="change">change</button></p>
    <p>{{reactiveRef}} <button @click="changeReactive">changeReactive</button></p>
</template>
<script lang="ts">
import { toRef, reactive, ref} from 'vue'

export default {
    setup(){
        //普通对象
        const obj = {name: "zhangsan", age: 12}
        const objRef = toRef(obj, "name");
        //响应式对象
        const a = ref("hello");
        //响应式对象
        const reactiveObj = reactive({name: "Willim", age: 6});
        const reactiveRef = toRef(reactiveObj, "name");
        const changeA = function(){
            //会响应到页面上
            a.value = "Vue 3.0";
        }
        const change = function(){
            //会影响 obj 的值，但是不会响应到页面上
            objRef.value = "lisi";
            console.log(obj);
        }
        const changeReactive = function(){
           //会影响 reactiveObj 的值，但是不会响应到页面上
            reactiveRef.value = "lisi";
            console.log(reactiveObj);
        }
        return{
            objRef,
            reactiveRef,
            change,
            changeReactive,
            a,
            changeA
        }
    }
}
</script>


Нажатие на изменениеA немедленно отреагирует на страницу; нажатие на изменение не сразу отреагирует на страницу; когда мы нажмем кнопку changeReactive, поскольку ответные данные изменены, данные на странице обновления будут обновлены, поэтому и zhangsan, и Willim обновляются.

  • Скриншот выше — это то, что мы видим, когда печатаем значения двух переменных objRef и reactiveRef. Вы можете видеть, что пользовательский атрибут _object результата является целевым, и они представляют собой сопоставление результата нового значения и исходного целевого значения через _object.
  • В то же время вы можете видеть, что reactiveObj — это отзывчивый объект, и это объект Proxy в свойстве _object.

Подводя итог: первоначальный дизайн toRef() должен быть похож на функцию Ref(). Ref() должен реагировать на переменную базового типа (возвращает объект с атрибутом значения), а toRef() — из Вырезать атрибуты из объекта (возвратить объект со значением атрибута), если исходный объект отзывчивый, то лишенные атрибуты также являются отзывчивыми; если исходные данные не отзывчивы, то очищенные атрибуты являются обычными объектами, которые не является реактивным.

toRefs

Сначала подумайте над вопросом: как выглядит структура объекта Proxy?

  const target = {name: 'zs'};
  const handler = {
      get: function(obj, prop){
          return prop in obj ? obj[prop]: 18
      }
  }
  const p = new Proxy(target, handler)
  const pp = {...p};
  console.log(target, pp, p);

Мы определили p как объект Proxy, но новый объект pp после ... деструктуризации больше не является объектом Proxy. Отраженная в Vue 3.0, функция reactive() вернет прокси-чувствительный объект, но если вы напрямую деконструируете переменную, созданную с помощью reactive(), возвращаемые данные не будут прокси-объектом, в результате чего он больше не будет иметь адаптивных функций. Появление toRefs() решает эту проблему.

  • Функция toRefs() очень похожа на toRef(). toRef() удаляет свойство объекта, toRefs() удаляет все свойства объекта и возвращает новый объект.
  • Использование функции toRefs(): const result = toRefs(target); Каждое свойство target будет преобразовано в объект ToRef.
  • Как и в toRef(), если исходная цель данных является адаптивной, то и результат также является адаптивным; если цель является обычным объектом, то результат также является нормальным объектом и не имеет адаптивности.
  • Поскольку функция toRefs() возвращает объект, каждое свойство объекта является объектом ToRef. Мы знаем... деструктурирующие объекты — это неглубокие копии, поэтому с помощью функции toRefs() мы можем деструктурировать реактивные данные. брать пример
<template>
    <p>我是 {{name}}，年龄{{age}} <button @click="change">change</button></p>
</template>
<script>
import {reactive, toRefs} from 'vue';
export default {
    setup(){
        const data = reactive({
            name: "Willim",
            age: 6,
            change: ()=>{
                data.age++;
            }
        })
        return {
            ...toRefs(data)
        }
    }
}
</script>

computed

Мы можем использовать вычисление для обработки реактивных переменных и возврата переменной типа ComputedRef.

  let doubleCount = computed(()=>{
      return data.count * 2;
  })

watch

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

//监听一个变量
watch(selected, (newVal, oldVal)=>{
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    document.title = newVal;
});

//监听多个变量
watch([selected, ()=>data.count], (newVal, oldVal)=>{
    console.log("newVal", newVal);
    console.log("oldVal", oldVal);
    document.title = newVal[0] +","+ newVal[1];
});
  • watch(arg, (newVal, oldVal)=>{})Вы можете прослушивать только реактивную переменную arg, а второй параметр — это функция обратного вызова, когда arg изменяется, логика функции побочного эффекта. newVal представляет измененное значение переменной, а oldVal представляет старое значение переменной.
  • watch([arg1, arg2,...], (newVal, oldVal)=>{})Вы также можете отслеживать несколько реагирующих переменных arg1, arg2 и т. д. Второй параметр — это функция обратного вызова.Когда любой из arg1, arg2... изменяется, логика функции побочного эффекта. newVal представляет измененное значение переменной, которое отображается в виде массива в это время, соответствующее переменным arg1, arg2... один к одному
  • selected — это переменная, созданная функцией ref, и мы можем прослушивать ее напрямую.
  • data — это переменная, созданная реактивной функцией, мы хотим отслеживать только определенный атрибут (количество), который необходимо записать в виде получения функции.

Жизненный цикл

После использования функции настройки вам должно быть интересно, куда идут функции цикла объявления в Vue2.0?
Фактически, исходная функция цикла объявления Vue 2.0 все еще может использоваться в Vue 3. В то же время Vue 3.0 также определяет набор функций жизненного цикла, которые соответствуют Vue 2.0 один к одному.

Options API Hook inside (setup)
beforeCreate Not needed* Инициализированные данные асинхронного запроса
created Not needed*
beforeMount onBeforeMount Функция, которую необходимо выполнить до того, как компонент будет смонтирован на узле.
mounted onMounted Функция для выполнения после монтирования компонента
beforeUpdate onBeforeUpdate Функция, которую нужно выполнить перед обновлением компонента
updated onUpdated Функция, которая будет выполняться после завершения обновления компонента
beforeUnmount (beforeDestroy) onBeforeUnmount Функция, которую необходимо выполнить перед выгрузкой компонента
unmounted (destoryed ) onUnmounted Функция для выполнения после удаления компонента
errorCaptured onErrorCaptured Вызывается при обнаружении ошибки от компонента-потомка
renderTracked(+) onRenderTracked((event)=>{}) Отслеживание состояния, выполняемое при изменении любых ответных данных, определенных в функции настройки, событие содержит все ответные переменные
renderTriggered(+) onRenderTriggered((event)=>{}) Отслеживание состояния, выполняемое при изменении любых ответных данных, определенных в функции настройки, событие содержит только измененные переменные данных
  • Настройка выполняется вокруг beforeCreate и создается, поэтому нам нужно определить логику в vue2.0.
  • onX необходимо сначала импортировать, а затем определить в функции настройки.
  • API параметров находится на том же уровне, что и функция setup(), и его не нужно импортировать.
import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
  created(){
    console.log("created")
  },
  beforeCreate(){
      console.log("beforeCreate")
  },
  beforeMount(){
      console.log("beforeMount")
  },
  mounted(){
      console.log("mounted")
  }
}
  • Порядок загрузки Vue2.0 и Vue3.0 следующий: setup() -> beforeCreate -> created -> onBeforeMount -> beforeMount -> renderTracked -> onMounted -> смонтированный
  • Vue2.0 vue3.0 и последовательность обновления: rendertroger migated -> onbeforeupdate -> foreupdate -> rendertracked -> Onupdated -> обновлен
  • Последовательность размонтирования компонентов Vue2.0 и Vue3.0 следующая: onBeforeUnmount -> beforeUnmount -> onUnmounted -> размонтированный

Composition API

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

<template>
  <p>X: {{x}}, Y: {{y}}</p>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
export default defineComponent({
  name: 'App',
  setup(){
    const pointer = reactive({
      x: 0,
      y: 0
    });
    const updateMouse = (e: MouseEvent)=>{
      pointer.x = e.pageX;
      pointer.y = e.pageY;
    };
    onMounted(()=>{
      document.addEventListener("click", updateMouse)
    })
    onUnmounted(()=>{
      document.removeEventListener("click", updateMouse)
    })
    return{
      ...toRefs(pointer)
    }
  }
});
</script>

В Vue3.0 мы можем рассмотреть возможность извлечения этой части логики для получения текущего времени и сделать ее общедоступным модулем. Этот модуль похож на обычный модуль Javascript, за исключением того, что в коде используются адаптивные переменные Vue3.0 и встроенные методы Vue3.0, и обычно возвращаются адаптивные переменные. Метод реализации следующий:

//新建文件夹 hooks，并新建文件 useMousePosition.ts
import { reactive, onMounted, onUnmounted } from 'vue';
function useMousePosition(){
    const pointer = reactive({
        x: 0,
        y: 0
      });
      const updateMouse = (e: MouseEvent)=>{
        pointer.x = e.pageX;
        pointer.y = e.pageY;
      };
      onMounted(()=>{
        document.addEventListener("click", updateMouse)
      });
      onUnmounted(()=>{
        document.removeEventListener("click", updateMouse)
      });
      return pointer;
}
export default useMousePosition;

Затем нам нужно только импортировать метод useMousePosition в App.vue и использовать его.

<template>
  <p>X: {{x}}, Y: {{y}}</p>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs} from 'vue';
//导入 useMousePosition
import useMousePosition from './hooks/useMousePosition';
export default defineComponent({
  name: 'App',
  setup(){
    const pointer = useMousePosition();
    return{
      ...toRefs(pointer)
    }
  }
});
</script>

Компоненты телепорта

телепорт переводится как «(быть) телепортированным». Цель разработки компонента Teleport — установить компонент на указанный элемент. До Vue3.0 все наши компоненты монтировались на корневом узле, таком как div с идентификатором приложения, а другие компоненты вкладывались слой за слоем во все дерево узлов html. Компонент Teleport Vue3.0 позволяет нам монтировать компонент на указанном узле, например узел на том же уровне, что и приложение корневого узла, чтобы реализация кода больше соответствовала нашим привычкам, а не вложенным. в узле приложения слой за слоем выше. Возьмите компонент всплывающего окна в качестве примера, чтобы проиллюстрировать использование компонента Teleport.

<!-- index.html文件-->
  <body>
    <div id="app"></div>
      <!-- 新增modal节点-->
    <div id="modal"></div>
  </body>
  • Создайте новый файл Modal.vue, и компонент Vue3.0 извлечет эмиссии, чтобы сделать логику более понятной, а входящие данные можно проверить с помощью payload.type.
  • Кому в телепорте указывает элемент, который нужно смонтировать, вот элемент, чей идентификатор является модальным.
// Modal.vue 文件
<template>
    <teleport to="#modal">
        <div id="center" v-if="isOpen">
            <h1><slot>标题</slot></h1>
            <button @click="close">close</button>
        </div>
    </teleport>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
    props: {
        isOpen: Boolean
    },
    emits: {
        'close-modal': (payload: any)=>{
            return payload.type === "close"
        }
    },
    setup(props, context){
        const close = function(){
            context.emit("close-modal", {type: "close"});
        }
        return {
            close
        }
    }
})
</script>
<style scoped>
    #center{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 200px;
        height: 200px;
        border: 1px solid #cccccc;
        background: white;
        margin: auto;
    }
</style>

Используйте модальные компоненты в любом компоненте.

<template>
    <p>是我<button @click="showModal">显示弹出框</button></p>
    <Modal :isOpen="openFlag" @closeModal="close">
        <slot>this is title</slot>
    </Modal>
</template>
<script lang="ts">
import {ref} from 'vue'
import Modal from "./Modal.vue";
export default {
    components: {
        Modal
    },
    setup(){
        const openFlag = ref(true);
        const close = function(){
            openFlag.value = false;
        }
        const showModal = function(){
            openFlag.value = true;
        }
        return{
            openFlag,
            close,
            showModal
        }
    }
}
</script>

Компоненты подвески

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

пример 1

Создайте новый файл AyncShow.vue, функция настройки должна вернуть объект Promise.

<template>
    <h1>{{result}}</h1>
</template>
<script lang="ts">
export default {
    setup(){
        return new Promise((resoluve)=>{
            setTimeout(()=>{
                resoluve({result: 100})
            }, 2000)
        })
    }
}
</script>

Использовать в файле App.vue

<template>
  <Suspense>
      <template #default> 
        <div>
          <AsyncShow/>
        </div>
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
  </Suspense>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs} from 'vue';
import AsyncShow from './components/AsyncShow.vue';
export default defineComponent({
  name: 'App',
  components: {
    AsyncShow
  }
});
</script>
  • Компонент Suspense имеет встроенные два именованных слота, один по умолчанию, который используется для отображения содержимого успешного запроса асинхронного компонента, другой резервный, который используется для отображения содержимого, отображаемого на странице перед ответом. запроса асинхронного компонента.
  • Слот по умолчанию может иметь несколько компонентов, но должен иметь корневой узел.

Пример 2

После завершения имитации отправки асинхронного запроса отобразите компонент. Вот полезный интерфейс внутреннего запроса:dog.ceo/dog-api/чтобы получить случайные фотографии собак. Во-первых, мы инкапсулируем метод запроса ajax get:

//ajax.ts
function getAjax(url: string){
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    resolve(xhr.response)
                }else{
                    reject(xhr.response);
                }
            }
        }
        xhr.onerror = ()=>{
            reject(xhr.response);
        }
    });
}
export default getAjax;

Затем инкапсулируйте компонент, запрашивающий изображения собак:

//DogShow.vue 
<template>
    <img :src="rawData">
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import getAjax from '../ajax';
export default defineComponent({
    async setup(){
    const p = getAjax("https://dog.ceo/api/breeds/image/random");
    let rawData;
    await p.then((result) =>{
        const tmp = JSON.parse(result as string);
        if(tmp.status==="success"){
            rawData = tmp.message;
        }
    })
    return {
        rawData
    }
}
})
</script>

Использование в App.vue

<template>
  <Suspense>
      <template #default> 
        <div>
          <AsyncShow/><DogShow/>
        </div>
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
  </Suspense>
  <p>{{error}}</p>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onErrorCaptured} from 'vue';
import AsyncShow from './components/AsyncShow.vue';
import DogShow from './components/DogShow.vue';
export default defineComponent({
  name: 'App',
  components: {
    AsyncShow,
    DogShow
  },
  setup(){
    const error = ref(null);
    onErrorCaptured((e: any)=>{
      error.value = e;
      return true;
    })
    return{
      error,
    }
  }
});
</script>


Ошибки отслеживаются в функции onErrorCaptured, например, наш URL намеренно ошибочен для проверки. Когда onErrorCaptured исключение не может быть перехвачено в компоненте DogShow, в противном случае оно не может быть перехвачено в родительском компоненте App.vue.

defineComponent

defineComponent существует для поддержки TypeScript. defineComponent не реализует специальной логики и может получить соответствующий тип входящего объекта. Компоненты, которые мы определяем с помощью defineComponent, могут хорошо поддерживать подсказки типов для настройки, свойств и т. д.

благодарный

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

Keep smiling and never give up, even when things get you down.
Даже если реальность расстраивает вас, продолжайте улыбаться и никогда не сдавайтесь.

Категории