Subscribe on changes!

Functional Component

avatar
Aug 5th 2021

What problem does this feature solve?

the Vue script only exports an function. This is a syntactic sugar for the setup method, like Function component for React render methods;

Before syntax:

<template>
    <div>{{title}}</div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
    setup(props) {
        const title = ref('Hello World');
        return { title };
    }
}
</script>

After syntax:

<template>
    <div>{{title}}</div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default (props) => {
    const title = ref('Hello World');
    return { title };
}
</script>

What does the proposed API look like?

pure functional component

avatar
Aug 5th 2021

Using a stateful component could be intentional. Just export a function explicitely.

avatar
Dec 30th 2021

It is very cool in Vue 3.1+ by setup script:

<template>
    <div>{{title}}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const title = ref('Hello World');
</script>