Новый синтаксис Vue3 - скрипт настройки сахара

Vue.js
Новый синтаксис Vue3 - скрипт настройки сахара

предисловие

Vue3 был в сети уже давно, и многие друзья должны были использовать Vue3. Затем с помощью vue3composition APIВы когда-нибудь чувствовали, что весь процесс будет более сложным? Например, когда вы определяете метод, а затем обнаруживаете, что шаблон должен использовать этот метод, вы должны вернуть этот метод. Когда в компоненте много методов и свойств, этот процесс может быть очень неудобным.

что такое скрипт установки

Сценарий установки — это новый синтаксический сахар vue 3. Его можно использовать, добавив после него тег script.setupретушь.

<script setup></script>

Это выглядит просто?

vue3 + ts + сценарий установки + лучшие практики volar (используйте сценарий установки в ts, чтобы увидеть это)

image.png

какая польза от установочного скрипта

Видя, что многие друзья здесь не понимают, какой смысл добавлять настройку после скрипта? Тогда смотри!

1> Автоматически регистрировать подкомпоненты

В чем смысл?

Теперь есть два компонента: родительский компонент Father.vue и дочерний компонент Child.vue.

vue3语法

<template>
  <div>
    <h2>我是父组件!</h2>
    <Child />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue'

export default defineComponent({
  components: {
      Child
  },
  setup() {

    return {
      
    }
  }
});
</script>

image.png

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

setup script写法

<template>
  <div>
    <h2>我是父组件!-setup script</h2>
    <Child />
  </div>
</template>

<script setup>
import Child from './Child.vue'

</script>

image.png

Это пара сравнения? Процесс подписки напрямую с регистрации подкомпонента напрямую.

2> Свойства и методы возвращать не нужно

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

setup.gif

vue3语法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const name = ref('CoCoyY1')
    const age = ref(18)

    const ageInc = () => {
      age.value++
    }

    return {
      name,
      age,

      ageInc
    }
  }
})
</script>

setup script写法

<template>
  <div>
    <h2 @click="ageInc">{{ name }} is {{ age }}</h2>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('CoCoyY1')
const age = ref(18)

const ageInc = () => {
  age.value++
}

</script>

Вау, разве это не очень удобно?

3> Поддержка реквизита, эмиссии и контекста

Увидев это, некоторые друзья могут спросить, как вы получаете реквизиты и контекст без setup()? Приходить!

vue3语法

//Father.vue
<template>
  <div >
    <h2 >我是父组件！</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import Child from './Child.vue';

export default defineComponent({
  components: {
    Child
  },
  setup(props, context) {
    const childCtx = (ctx) => {
      console.log(ctx);
    }

    return {
      childCtx
    }
  }
})
</script>


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: [
    'child-click'
  ],
  props: {
    msg: String
  },
  setup(props, context) {
    const handleClick = () => {
      context.emit('child-click', context)
    }

    return {
      props,
      handleClick
    }
  },
})
</script>

image.png

Нажмите на подкомпонент, чтобы увидеть, что напечатано.

image.png

Очевидно, что контекст успешно напечатан, что соответствует синтаксису vue3.

setup script写法

//Father.vue
<template>
  <div >
    <h2 >我是父组件！</h2>
    <Child msg="hello" @child-click="childCtx" />
  </div>
</template>

<script setup>
import Child from './Child.vue';

const childCtx = (ctx) => {
  console.log(ctx);
}
</script>


//Child.vue
<template>
  <span @click="handleClick">我是子组件! -- msg: {{ props.msg }}</span>
</template>

<script setup>
import { useContext, defineProps, defineEmit } from 'vue'

const emit = defineEmit(['child-click'])
const ctx = useContext()
const props = defineProps({
  msg: String
})

const handleClick = () => {
  emit('child-click', ctx)
}
</script>

image.png

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

image.png

Здесь вы можете видеть, что контекст печатается, а свойства и методы attrs, emit, props, slots, expose все еще можно использовать.

Правильно, синтаксический сахар сценария установки предоставляет нам три новых API:defineProps,defineEmitа такжеuseContext.

вdefinePropsПришли реквизиты для получения значения родительского элемента.defineEmitИспользуется для объявления таблицы инициированных событий.useContextИспользуется для получения контекста контекста компонента.

Сравнивая два способа написания, скрипт установки более лаконичен и удобен?

но! ! !

Обратите внимание на порядок, в котором я представил три API, в этот момент, если я поставлюuseContextНа последнем введенном, так ....

image.png

Ошибка! ! !

Это должно быть ошибкой, я не могу придумать никакого другого объяснения.

Выше приведено основное использование нового скрипта настройки синтаксического сахара vue3, разве это не восхитительно? Автор считает, что этот синтаксический сахар должен стать формальным содержанием, потому что он, можно сказать, очень удобен и лаконичен.

Напишите в конце (^.^)

Если вы считаете, что я пишу неплохо, вы можете поставить мне лайк ^.^

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

Я CoCoyY1, любитель интерфейсов, который записывает собственное обучение.

Мои другие статьи

выставить функцию в Vue3———— Управление содержимым объекта, отображаемого при ссылке на компонент

Категории