Composition API vs Options API: полное сравнение

1<template>
2  <div>
3    <p>{{ fullName }}</p>
4    <button @click="updateName">Обновить</button>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return {
12      firstName: 'Иван',
13      lastName: 'Петров',
14    };
15  },
16  computed: {
17    fullName() {
18      return `${this.firstName} ${this.lastName}`;
19    },
20  },
21  methods: {
22    updateName() {
23      this.firstName = 'Николай';
24    },
25  },
26  mounted() {
27    console.log('Компонент смонтирован');
28  },
29};
30</script>

1<template>
2  <div>
3    <p>{{ fullName }}</p>
4    <button @click="updateName">Обновить</button>
5  </div>
6</template>
7
8<script setup>
9import { ref, computed, onMounted } from 'vue';
10
11const firstName = ref('Иван');
12const lastName = ref('Петров');
13
14const fullName = computed(() => `${firstName.value} ${lastName.value}`);
15
16function updateName() {
17  firstName.value = 'Николай';
18}
19
20onMounted(() => {
21  console.log('Компонент смонтирован');
22});
23</script>

1<script setup>
2// Все переменные автоматически доступны в template
3// Не нужно экспортировать
4// Автоматическая регистрация компонентов
5</script>

1<script>
2import { defineComponent, ref } from 'vue';
3
4export default defineComponent({
5  setup() {
6    const count = ref(0);
7    return { count };
8  },
9});
10</script>
11
12<!-- vs script setup -->
13<script setup>
14import { ref } from 'vue';
15const count = ref(0);
16</script>

1data() {
2  return {
3    count: 0,
4  };
5},
6methods: {
7  increment() {
8    this.count++;
9  },
10}

1const count = ref(0);
2
3function increment() {
4  count.value++;
5}
6
7const state = reactive({ count: 0 });
8state.count++;

1export default {
2  data() {
3    return { x: 0, y: 0 };
4  },
5  methods: {
6    updatePosition(event) {
7      this.x = event.clientX;
8      this.y = event.clientY;
9    },
10  },
11};

1import { ref, onMounted, onUnmounted } from 'vue';
2
3export function usePosition() {
4  const x = ref(0);
5  const y = ref(0);
6
7  function update(event) {
8    x.value = event.clientX;
9    y.value = event.clientY;
10  }
11
12  onMounted(() => window.addEventListener('mousemove', update));
13  onUnmounted(() => window.removeEventListener('mousemove', update));
14
15  return { x, y };
16}

1<script lang="ts">
2import { defineComponent, PropType } from 'vue';
3
4interface User {
5  id: number;
6  name: string;
7}
8
9export default defineComponent({
10  props: {
11    user: {
12      type: Object as PropType<User>,
13      required: true,
14    },
15  },
16});
17</script>

1<script setup lang="ts">
2interface User {
3  id: number;
4  name: string;
5}
6
7const props = defineProps<{
8  user: User;
9}>();
10</script>