Vue3 最新構文
<script setup> の紹介

FUTURE CON 2022 - Jul 18th

Press Space for next page

Vue3 最新構文
<script setup> の紹介

FUTURE CON 2022 - Jul 18th

Press Space for next page

1

自己紹介

太田洋介

年齢: アラフォー　 📍: 神奈川県
GitHub: @ota-meshi ♡ Sponsor , npm: ota-meshi, Twitter: @omoteota,
Qiita: @ota-meshi
所属:
- フューチャー株式会社社員 (2015/06 - )
- Vue.js eslint-plugin-vue メンテナー (eslint-plugin-vue 2018/08 - , Vue 2019/07 - )
- Stylelint Owners チーム (2020/09 - )
- Intlify eslint-plugin-vue-i18n 担当 (2020/07 - )
- Stylus チーム (2022/06 - )
WEB+DB PRESS Vol.120 「最新Vue.js 3入門」共同執筆 (2020/12/24)
Google Open Source Peer Bonus 2022 受賞

2

アジェンダ

3

What is <script setup>？🤔

4

What is <script setup>？

Vue3.2 で正式に導入された SFC 用の新構文
7/1にリリースされた Vue2.7 にも導入されました。
- 冗長な記述を少なくしよりシンプルに記述できる
- 実行時のパフォーマンスの向上
  （他の記述方法からのコンパイルでは必要だった中間処理をバイパス）
- TypeScript との親和性向上
  （型情報によるコンポーネント定義の生成。IDE のサポート）

<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";

const count = ref(0);

function handleClick() {
  count.value++;
}
</script>

<template>
  <button @click="handleClick">
    {{ count }}
  </button>

  <MyComponent />
</template>
<script setup>
import { ref } from "vue";
import MyComponent from "./MyComponent.vue";

const count = ref(0);

function handleClick() {
  count.value++;
}
</script>

<template>
  <button @click="handleClick">
    {{ count }}
  </button>

  <MyComponent />
</template>

5

<script setup>の書き方

6

<script setup>の書き方（基本）

<script setup> と記述します
トップレベルの変数はテンプレートで直接使用できます

<script setup>
const msg = "Hello!";

function handleClick() {
  alert(msg);
}
</script>

<template>
  <button
    @click="handleClick">
    {{ msg }}
  </button>
</template>
<script setup>
const msg = "Hello!";

function handleClick() {
  alert(msg);
}
</script>

<template>
  <button
    @click="handleClick">
    {{ msg }}
  </button>
</template>

7

<script setup>の書き方（基本）

別の方法ではこのように書いていました。

Composition API

<script>
export default {
  setup() {
    const msg = "Hello!";
    function handleClick() {
      alert(msg);
    }
    return {
      msg,
      handleClick,
    };
  },
};
</script>

<template>
  <button @click="handleClick">
    {{ msg }}
  </button>
</template>
<script>
export default {
  setup() {
    const msg = "Hello!";
    function handleClick() {
      alert(msg);
    }
    return {
      msg,
      handleClick,
    };
  },
};
</script>

<template>
  <button @click="handleClick">
    {{ msg }}
  </button>
</template>

Options API

<script>
export default {
  data() {
    return {
      msg: "Hello!",
    };
  },
  methods: {
    handleClick() {
      alert(this.msg);
    },
  },
};
</script>

<template>
  <button @click="handleClick">
    {{ msg }}
  </button>
</template>
<script>
export default {
  data() {
    return {
      msg: "Hello!",
    };
  },
  methods: {
    handleClick() {
      alert(this.msg);
    },
  },
};
</script>

<template>
  <button @click="handleClick">
    {{ msg }}
  </button>
</template>

8

<script setup>の書き方（リアクティブ・コンポーネント）

リアクティブな状態を管理するにはReactivity APIを使用します
コンポーネントはimportするだけで使用できます
（トップレベルの変数と同じ扱いです）

<script setup>
import { ref } from "vue";
import MyButton from "./MyButton.vue";

const count = ref(0);

function handleClick() {
  count.value++;
}
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>
<script setup>
import { ref } from "vue";
import MyButton from "./MyButton.vue";

const count = ref(0);

function handleClick() {
  count.value++;
}
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>

9

<script setup>の書き方（リアクティブ・コンポーネント）

別の方法ではこのように書いていました。

Composition API

<script>
import { ref } from "vue";
import MyButton from "./MyButton.vue";
export default {
  components: {
    MyButton,
  },
  setup() {
    const count = ref(0);
    function handleClick() {
      count.value++;
    }
    return {
      count,
      handleClick,
    };
  },
};
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>
<script>
import { ref } from "vue";
import MyButton from "./MyButton.vue";
export default {
  components: {
    MyButton,
  },
  setup() {
    const count = ref(0);
    function handleClick() {
      count.value++;
    }
    return {
      count,
      handleClick,
    };
  },
};
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>

Options API

<script>
import MyButton from "./MyButton.vue";
export default {
  components: {
    MyButton,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
    },
  },
};
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>
<script>
import MyButton from "./MyButton.vue";
export default {
  components: {
    MyButton,
  },
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick() {
      this.count++;
    },
  },
};
</script>

<template>
  <MyButton @click="handleClick">
    {{ count }}
  </MyButton>
</template>

10

<script setup>の書き方（カスタムディレクティブ・非同期）

カスタムディレクティブはvで始まる変数を使用します
トップレベルawait も使用できます
(Vue2では使用できません)

<script setup>
import vMyDirective from "./my-directive.js";
const post = await fetch(`/api/post/1`).then((r) => r.json());
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>
<script setup>
import vMyDirective from "./my-directive.js";
const post = await fetch(`/api/post/1`).then((r) => r.json());
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>

11

<script setup>の書き方（カスタムディレクティブ・非同期）

別の方法ではこのように書いていました。

Composition API

<script>
import vMyDirective from "./my-directive.js";
export default {
  directives: {
    "my-directive": vMyDirective,
  },
  async setup() {
    const post = await fetch(`/api/post/1`).then((r) => r.json());
    return {
      post,
    };
  },
};
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>
<script>
import vMyDirective from "./my-directive.js";
export default {
  directives: {
    "my-directive": vMyDirective,
  },
  async setup() {
    const post = await fetch(`/api/post/1`).then((r) => r.json());
    return {
      post,
    };
  },
};
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>

Options API

<script>
import vMyDirective from "./my-directive.js";
export default {
  directives: {
    "my-directive": vMyDirective,
  },
  data() {
    return {
      post: "", // 非同期はスマートな書き方ができない
    };
  },
  async mounted() {
    this.post = await fetch(`/api/post/1`).then((r) => r.json());
  },
};
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>
<script>
import vMyDirective from "./my-directive.js";
export default {
  directives: {
    "my-directive": vMyDirective,
  },
  data() {
    return {
      post: "", // 非同期はスマートな書き方ができない
    };
  },
  async mounted() {
    this.post = await fetch(`/api/post/1`).then((r) => r.json());
  },
};
</script>

<template>
  <p v-my-directive>
    {{ post }}
  </p>
</template>

12

<script setup>の書き方（Prop・カスタムイベント）

Props を定義・使用するには defineProps というコンパイラマクロを使用します
カスタムイベントを定義・使用するには defineEmits というコンパイラマクロを使用します

<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue", "send"]);
const inputRef = ref();

function handleInput() {
  emit("update:modelValue", inputRef.value.value);
}
function handleClick() {
  emit("send", props.modelValue);
}
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  modelValue: String,
});
const emit = defineEmits(["update:modelValue", "send"]);
const inputRef = ref();

function handleInput() {
  emit("update:modelValue", inputRef.value.value);
}
function handleClick() {
  emit("send", props.modelValue);
}
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>

13

<script setup>の書き方（Prop・カスタムイベント）

別の方法ではこのように書いていました。

Composition API

<script>
import { ref } from "vue";

export default {
  props: {
    modelValue: String,
  },
  emits: ["update:modelValue", "send"],
  setup(props, { emit }) {
    const inputRef = ref();

    function handleInput() {
      emit("update:modelValue", inputRef.value.value);
    }
    function handleClick() {
      emit("send", props.modelValue);
    }
    return {
      inputRef,
      handleInput,
      handleClick,
    };
  },
};
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>
<script>
import { ref } from "vue";

export default {
  props: {
    modelValue: String,
  },
  emits: ["update:modelValue", "send"],
  setup(props, { emit }) {
    const inputRef = ref();

    function handleInput() {
      emit("update:modelValue", inputRef.value.value);
    }
    function handleClick() {
      emit("send", props.modelValue);
    }
    return {
      inputRef,
      handleInput,
      handleClick,
    };
  },
};
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>

Options API

<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ["update:modelValue", "send"],
  methods: {
    handleInput() {
      this.$emit("update:modelValue", this.$refs.inputRef.value);
    },
    handleClick() {
      this.$emit("send", this.modelValue);
    },
  },
};
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>
<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ["update:modelValue", "send"],
  methods: {
    handleInput() {
      this.$emit("update:modelValue", this.$refs.inputRef.value);
    },
    handleClick() {
      this.$emit("send", this.modelValue);
    },
  },
};
</script>

<template>
  <input ref="inputRef" :value="modelValue" @input="handleInput" />
  <button @click="handleClick">send</button>
</template>

14

<script setup>の書き方（with TypeScript）

definePropsとdefineEmitsは TypeScript を使用する場合、型のみの定義を使用できます
- definePropsでは Prop の型を定義します
  - デフォルト値には withDefaults を併用します
- defineEmitsでは関数の型を定義します

<script setup lang="ts">
// ...
const props = withDefaults(
  defineProps<{
    modelValue: string;
    message?: "Hello!" | "Goodby!";
  }>(),
  {
    message: "Hello!",
  }
);
const emit = defineEmits<{
  (e: "update:modelValue", newValue: string): void;
  (e: "send", sendValue: string): void;
}>();
// ...
</script>
<script setup lang="ts">
// ...
const props = withDefaults(
  defineProps<{
    modelValue: string;
    message?: "Hello!" | "Goodby!";
  }>(),
  {
    message: "Hello!",
  }
);
const emit = defineEmits<{
  (e: "update:modelValue", newValue: string): void;
  (e: "send", sendValue: string): void;
}>();
// ...
</script>

15

<script setup>の書き方（with TypeScript）

型のみ定義方法を使用しない場合はこのように書いていました。

<script setup lang="ts">
// ...
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  message: {
    type: String, // ユニオン型にはできません。
    default: "Hello!",
  },
});
const emit = defineEmits({
  "update:modelValue": (newValue: string) => true,
  send: (sendValue: string) => true,
});
// ...
</script>
<script setup lang="ts">
// ...
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  message: {
    type: String, // ユニオン型にはできません。
    default: "Hello!",
  },
});
const emit = defineEmits({
  "update:modelValue": (newValue: string) => true,
  send: (sendValue: string) => true,
});
// ...
</script>

16

<script setup>の書き方（その他）

defineExposeを使用して外部から参照できるインスタンスプロパティを定義します
useSlotsとuseAttrsを使用して$slotsや$attrsのような情報にアクセスできます
<script setup>とは別に<script>ブロックを定義できます
- export default {}を定義することで、inheritAttrsなどのコンポーネントオプションを定義できます
- .vueがexportする情報を定義できます
- module が呼び出されたときに一度だけ実行されるスクリプトを書くことができます

<script setup>
import { useSlots, useAttrs } from "vue";

const slots = useSlots();
const attrs = useAttrs();
// ...
</script>
<script setup>
import { useSlots, useAttrs } from "vue";

const slots = useSlots();
const attrs = useAttrs();
// ...
</script>

<script>
// module が呼び出されたときに一度だけ実行される
runSideEffectOnce();

// オプションの定義
export default {
  inheritAttrs: false,
};
</script>

<script setup>
// ...
</script>
<script>
// module が呼び出されたときに一度だけ実行される
runSideEffectOnce();

// オプションの定義
export default {
  inheritAttrs: false,
};
</script>

<script setup>
// ...
</script>

17

Reactivity Transform

18

What is Reactivity Transform？

Vue3.3 で正式に導入予定の新構文
（Vue3.2 でも実験的機能として使用可能）
- リアクティブ API 周りの冗長な記述を少なくしよりシンプルに記述できる
- SFC 以外（JavaScript・TypeScript）でも使用できます
  (Vite を使用している場合)

<script setup>
import MyComponent from "./MyComponent.vue";

const count = $ref(0);

function handleClick() {
  count++;
}
</script>

<template>
  <button @click="handleClick">
    {{ count }}
  </button>

  <MyComponent />
</template>
<script setup>
import MyComponent from "./MyComponent.vue";

const count = $ref(0);

function handleClick() {
  count++;
}
</script>

<template>
  <button @click="handleClick">
    {{ count }}
  </button>

  <MyComponent />
</template>

19

What is Reactivity Transform？

Ref オブジェクトの.valueを消し去れます。

以前：

<script setup>
import { ref, toRefs, computed } from "vue";
import { useMouse } from "@vueuse/core";

const count = ref(0);

function handleClick() {
  count.value++;
}

const { x, y } = toRefs(useMouse());

const mousePosition = computed(() => `x: ${x.value}, y: ${y.value}`);
</script>
<script setup>
import { ref, toRefs, computed } from "vue";
import { useMouse } from "@vueuse/core";

const count = ref(0);

function handleClick() {
  count.value++;
}

const { x, y } = toRefs(useMouse());

const mousePosition = computed(() => `x: ${x.value}, y: ${y.value}`);
</script>

Reactivity Transform 使用：

<script setup>
import { useMouse } from "@vueuse/core";

let count = $ref(0);

function handleClick() {
  count++;
}

let { x, y } = $(useMouse());

const mousePosition = $computed(() => `x: ${x}, y: ${y}`);
</script>
<script setup>
import { useMouse } from "@vueuse/core";

let count = $ref(0);

function handleClick() {
  count++;
}

let { x, y } = $(useMouse());

const mousePosition = $computed(() => `x: ${x}, y: ${y}`);
</script>

20

What is Reactivity Transform？

詳細は Reactivity Transform のドキュメントを参照してください。
https://vuejs.org/guide/extras/reactivity-transform.html

現在、実験的機能であるため、このスライドでは詳細は割愛します。
また、このスライドに載せた記述方法や機能は変更になる可能性があります。

21

まとめ

22

まとめ

Vue3.2 で <script setup> が導入されました
（Vue2.7 にも導入されました）
Vue3.3 では Reactivity Transform が導入される予定です

冗長だった記述がかなり少なくなり
シンプルに記述できます。

23

Vue3.3 が楽しみですね 🤩

24

Thank you for your attention

Support me ❤ or follow me!!
GitHub: https://github.com/ota-meshi
Twitter: https://twitter.com/omoteota
Qiita: https://qiita.com/ota-meshi

25