Vue3 - сценарий установки очень крутой опыт, вам стоит попробовать

предисловие

Vue3 выпущен уже давно, я думаю, что большинство фронтендеров уже поиграли в него.setupметод, который позволяет нам очень интуитивно и удобно совмещать нашу бизнес-логику и хуки. существуетsetupПеременная, возвращаемая внутри, может находиться непосредственно вtemplateиспользуется внутрь. Большую часть времени большая часть нашей логики сосредоточена наsetupметод, поэтому чиновник предоставляетэкспериментальныйписать прямо вscriptнаписать внутриsetupсодержания, а именно:setup script.

использовать

Наш предыдущий компонент может выглядеть так:

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";

export default defineComponent({
  components: {
    Card,
  },
  setup() {
    const msg = ref("setup script");
    return { msg };
  }
});
</script>

Здесь выполняются две вещи: одна — импортировать и зарегистрировать компонент, а другая — экспортировать строку вtemplateиспользовать.

включитьsetup scriptПосле этого это выглядит так:

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>


<script lang="ts" setup>
import { ref } from "vue";
import Card from "./components/Card.vue";
const msg = ref("setup script");
</script>

Шаг регистрации компонента здесь опущен, и нет явного действия по экспорту переменной.

Хотя это экспериментальная функция, она все еще работает из коробки, вам нужно толькоscriptнастроить наsetupВот и все.

Экспорт переменных и методов

существуетsetup scriptВсе переменные, определенные в нем, будут автоматически экспортированы. Очень удобно

<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () => {
  console.log("on click");
};
</script>

использовать компоненты

Все компоненты импортируются и автоматически регистрируются:

<script lang="ts" setup>
import Card from "./components/Card.vue";
import Button from "./components/Button.vue";
</script>

Использование реквизита — defineProps

использоватьpropsнужно использоватьdefinePropsЧтобы определить, конкретное использование такое же, как и предыдущееpropsАналогично написанию:

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>

ДатьpropsОпределить тип:

const props = defineProps({
  title: String,
  content: {
      type: Stirng,
      required: true
  }
});

Способ использования аннотаций TS:

defineProps<{
  title?: string
  content: string
}>();

Использовать излучения - определяют

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

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')

// 对事件进行验证
const emit = defineEmit({
    onHeaderClick: ({title}) => {
        if(!title) {
            console.warn('Invalid title')
            return false
        }
        return true
    }
})

Конкретное использование такое же, как и раньше.

использовать контекст — useContext

использоватьuseContextПолучить контекст:

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

полученныйslots attrsДоsetupВнутри то же самое.

инструкция

Директива аналогична компоненту, импортирующему пользовательскую регистрацию:

<script setup>
  import {color} from './v-color'
</script>

<template>
  <div v-color />
</template>

Импортированные цвета автоматически сопоставляются как директивыv-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template>
  <div v-super-color />
</template>

Суммировать

setup scriptКод выглядит намного проще, а эффективность разработки значительно повышается. Но, к сожалению, это только экспериментальная функция, предлагаемое время: 2020-10-28, и она еще не выпущена.

Но хорошая новость заключается в следующем:

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

Помните, что его нельзя использовать в производственной среде.