Предложение по настройке скрипта Vue3 окончательно доработано

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

Предложение по настройке сценария vue3 находится на экспериментальной стадии в течение нескольких месяцев.Когда мы используем vue-шаблон vite, терминал сообщит нам, что это все еще экспериментальное предложение, и рекомендуется заблокировать версию vue, чтобы избежать поломка, если мы используем этот метод письма. Так что у меня просто было понимание этого предложения раньше, и я не использовал это обозначение в своей работе. Наконец мы приветствовали его утром 29 июня 2021 года.Finalization, ниже кратко изложено содержание этого окончательного проекта.

Следующий контент будет реализован в версии 3.1.3, но «экспериментальный» статус этого предложения не будет официально удален до версии 3.2, а устаревшие API, упомянутые ниже, не будут перемещены до версии 3.2. За исключением старого и нового API будут сосуществовать некоторое время до этого.

заброшенныйuseContextAPI

Предыдущее использование было таким:

import { useContext} from 'vue'
const { attrs, emit, expose, slots } = useContext()

Этот API будет удален после версии 3.2 и будет разделен на несколько новых API для замены

новыйuseAttrsAPI

attrsэто свойство, передаваемое от родительского компонента к дочернему компоненту, за исключениемprops,classтак же какstyleВнешние свойства:

// 父组件
<child a="1" b="2" msg="hello" class="child" style="color:red" />

Например, в приведенном выше коде родительский компонент передает несколько свойств дочернему компоненту, мы предполагаемchildкомпонент определяетmsgprop, то дочерний компонент получаетattrsто есть{a: "1", b: "2"}.

Старое использование:

import { useContext} from 'vue'
const { attrs } = useContext()
console.log(attrs)

Новое использование:

import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs)

новыйuseSlotsAPI

useSlotsКак правило, он используется только с JSX. Чтобы понять, новый метод написания представлен ниже. Старый метод написания заключается в том, чтобы поставитьuseSlotsзаменитьconst slots = useContext()Просто делать:

// 父组件
<child>
  <div>默认插槽</div>
  <template #left>
    <div>具名插槽</div>
  </template>
</child>

// 子组件
import { defineComponent, useSlots } from 'vue'
const Child = defineComponent({
  setup() {
    const slots = useSlots()

    // 渲染组件
    return () => (
      <div>
        // 默认插槽
        <div>{ slots.default ? slots.default() : '' }</div>
        // 具名插槽
        <div>{ slots.left ? slots.left() : '' }</div>
      </div>
    )
  },
})
export default Child

новыйdefineExposeAPI

когда используешь<script setup>, вы можете поставить<template>рассматривается какsetupФункция в такой области видимости, чтоsetupэквивалентно замыканию, за исключением того, что внутренний<template>Никто не может получить доступ к данным в пределах его области действия. Как код ниже:

function setup() {
  const a = 1
  const b = 2

  return function template() {
    // has access to `b` but doesn't necessarily uses it
    return `<div>${a}</div>`
  }
}

Поэтому в традиционном методе написания настройки мы можем получить доступ к данным и методам дочернего компонента через экземпляр ref дочернего компонента в родительском компоненте (childRef.value.someFn()),прибыть<script setup>Этот набор здесь не подойдет, вам нужно выставить контент, который вы хотите выставить наружу.

СтарыйuseContextAPI работает так:

// 子组件
<script setup>
import { useContext } from 'vue'
const { expose } = useContext()
const a = 1
const b = 2
expose({
    a
})
</script>

// 父组件
<template>
  <child ref="childRef" />
</template>
<script setup>
import { ref } from 'vue'
const childRef = ref()
console.log(childRef.value.a)   // 1
console.log(childRef.value.b)   // undefined
</script>

с новымdefineExposeAPI:

import { defineExpose } from 'vue'
const a = 1
const b = 2
defineExpose({
    a
})

defineEmit -> defineEmits

defineEmitAPI был переименованdefineEmits, потому что любой вариантemits,propsили APIdefinePropsоба во множественном числе, передdefineEmitЭто кажется немного ослепительным, и унифицированное число меняется на множественное, а использование остается прежним.

import { defineEmits } from 'vue'
const emit = defineEmits(['change', 'close'])
emit('change', 'change事件的payload')
emit('close', 'close事件的payload')

новыйwithDefaultsAPI

Когда мы используем TS в vue, есть два способа определить тип реквизита:

  1. Это конструктор нативного jsString, Boolean, Number, ArrayЖдать:
import { defineProps } from 'vue'

defineProps({
  name: {
    type: String,
    default: 'Niko',
  },
  age: Number
})
  1. Определяется типами ТС:
import { defineProps } from 'vue'

defineProps<{
  name: string
  age: number
}>()

Однако при использовании второго метода невозможно определить значение реквизита по умолчанию. Используйте новыйwithDefaultsAPI может реализовать определение реквизита по умолчанию, он получает два параметра, первый из нихdefineProps(), второй по умолчанию:

import { defineProps, withDefaults } from 'vue'

withDefaults(defineProps<{
  name: string
  age: number
}>(), {
  name: 'Niko',
  age: 18
})

инструкция по восстановлениюvприставка

использовать сейчасv-my-dirТакая инструкция должна использоваться при определении переменной инструкции.vMyDir, то есть добавлениеvприставка.

<script setup>
  import { directive as vClickOutside } from 'v-click-outside'
</script>

<template>
  <div v-click-outside />
</template>

верхawaitслужба поддержки

теперь можно напрямую<script setup>запись блока на верхнем уровнеawaitвместо того, чтобы положитьasyncфункция, она будет автоматически скомпилирована вasync setup().

Удалить<template>Вверхinherit-attrsАтрибуты

Как определить что-то вродеnameТакой вариант?

На этот ответ отвечают вместе с предыдущим, равным<script setup>независимый<script>блок для определения:

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  }
</script>

<script setup>
  // script setup logic
</script>

See Declaring Additional Options and Automatic Name Inference.

Ссылаться на

Категории