Анализ новых возможностей Vue3

Vue.js

Заметные новые функции

  • Composition API
  • Teleport
  • Fragments
  • Emits Component Option

Teleport

Vue побуждает нас инкапсулировать пользовательский интерфейс и поведение пользовательского интерфейса в компоненты и создавать наше приложение путем вложения компонентов. Однако бывает и такая ситуация, когда имеется несколько подкомпонентов, принадлежащих одному и тому же родительскому компоненту с логической точки зрения, но с точки зрения технической реализации несколько подкомпонентов могут быть смонтированы в разных позициях DOM. Это распространенный сценарий. Перед Vue3 мы можем обратиться к реализации Poper в Element UI.

      if (!popper || !reference) return;
      if (this.visibleArrow) this.appendArrow(popper);
      if (this.appendToBody) document.body.appendChild(this.popperElm);
      if (this.popperJS && this.popperJS.destroy) {
        this.popperJS.destroy();
      }

Мы можем найти это поdocument.body.appendChildМетод монтирует элемент на тело. В Vue3 мы можем сделать это через Teleport.imgбудет монтироваться под кузов.

<template>
  <teleport to="body">
    <img alt="Vue logo" src="./assets/logo.png" />
  </teleport>
  <HelloWorld msg="Welcome to Your Vue.js App" />
</template>

0RfiRA.png

Элементы, передаваемые Teleport, по-прежнему будут контролироваться Vue, который может эффективно использовать характеристики Vue.Можно сказать, что появление Teleport значительно повышает возможность повторного использования и инкапсуляцию компонентов. Наконец, еще одно слово, имя здесь можно назватьPortalЭто заставит людей лучше понять, ведь все должны были поиграть в портал Valve. как бы избежать и возможно<portal></portal>Конфликт тегов просто изменил глагол.

Fragments

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

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Emits Component Option

Проверка пользовательских событий

Если пользовательское событие объявлено с помощью синтаксиса объекта вместо синтаксиса массива, то пользовательское событие может быть проверено, как проверка свойства.

app.component('custom-form', {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm() {
      this.$emit('submit', { email, password })
    }
  }
})
v-modal
  • Когда мы используем v-modal в пользовательском компоненте, реквизиты и события по умолчанию меняются,
  1. опора:value->modalValue
  2. event: input->update:modalValue
  • v-bind.syncтак же какmodalАргументы удаляются и заменяются v-модальными аргументами. Форма v-модального синтаксического сахара в vue3 изменена, а v-модальная эквивалентная форма в vue3 изменена на следующую форму.
<ChildComponent v-model="pageTitle" />

<!-- would be shorthand for: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Имя модального окна можно изменить с помощью аргументов v-modal.

<ChildComponent v-model:title="pageTitle" />

<!-- would be shorthand for: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  • Поддержка нескольких привязок v-modal
<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>
  • Поддержка создания пользовательских модификаторов v-modal
<my-component v-model.capitalize="bar"></my-component>

app.component('my-component', {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  template: `
    <input type="text" 
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)">
  `,
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
})

Большие перемены

другие незначительные изменения

Категории