Как во Vue3/Nuxt3 использовать this со script setup?

В Vue 3 и Nuxt 3 введен новый синтаксис для компонентов, называемый "script setup", который позволяет работать без определения отдельного блока data, methods, computed и так далее. Однако, в связи с этим изменениями, синтаксис this для доступа к данным и методам компонента стал недоступен.

Вместо использования this, в script setup можно использовать композицию функций. Например, для определения переменных состояния (data) и методов компонента, можно использовать функцию ref и функции импорта из Vue, такие как reactive, computed.

Вот пример, как можно использовать ref и reactive:

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

// Определение переменных состояния
const count = ref(0);
const data = reactive({
  name: 'John',
  age: 25
});

// Определение методов компонента
function increment() {
  count.value++;
}

function decrement() {
  count.value--;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ data.name }}</p>
    <p>Age: {{ data.age }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

Как видите, переменные count и data определены с помощью функций ref и reactive. Для обращения к ним в шаблоне используется простое имя переменной, без this. То же самое касается и методов компонента - они просто вызываются по имени.

Этот новый подход делает код компонента более читаемым и понятным, и упрощает отслеживание зависимостей. Однако, стоит учесть, что script setup все еще находится в экспериментальном статусе и может быть подвержен изменениям в будущих версиях Vue и Nuxt.

В целом, использование this со script setup не рекомендуется, и вместо этого следует использовать новый синтаксис, описанный выше.