Вернуться назад

Composition API VS Options API

Composition API

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>
<p class="kaka1" style="background-color: yellow">Вторая строка.</p>

<div id="app">
    <div>Вот сообщение: {{ message }}</div>
    <div>А вот второе сообщение: {{ getTheMessage() }}</div>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const message = "Это моё первое сообщение.";
        const message2 = ref("");
        function getTheMessage() {
            message2.value = "Второе сообощение.";
            return message2.value;
        }
        return {
            message,
            getTheMessage
        }
    }
});

kukuruza.mount("#app");

Options API

Тот же самый код, но только в стиле Options API. HTML-файл остался без изменений. Изменился только JavaScript.

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>
<p class="kaka1" style="background-color: yellow">Вторая строка.</p>

<div id="app">
    <div>Вот сообщение: {{ message }}</div>
    <div>А вот второе сообщение: {{ getTheMessage() }}</div>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    data() {
        const message = "Это моё первое сообщение.";
        const message2 = "";
        return {
            message,
            message2
        }
    },
    methods: {
        getTheMessage() {
            this.message2 = "Второе сообощение.";
            return this.message2;
        }
    },
    mounted() {
        this.getTheMessage();
    }
});

kukuruza.mount("#app");

Поподробней про Options API

// Структура компонента Vue:

export default {
   data() {
      return {
         // Данные компонента
      }
   },
   computed: {
      // Вычисляемые свойства
   },
   methods: {
      // Методы компонента
   },
   created() {
      // Жизненный цикл
   },
   mounted() {
      // Жизненный цикл
   },
   ...
}