viT-1/script-setup.md

## script-setup.md

      
    Raw
  

              script-setup.md
            
          
    Vue3 (Composition API) не поддерживает (script setup src) традиционную схему разделения кода на esm-модули,
так как принуждает прописывать код в *.vue-файлах (SFC). Соответственно тонко рулить
import'ами похоже не выйдет.
Более того, если ранее с использованием vue-class-component
приучали к "чистому коду" (всё что требуется импортируем явно), то теперь с такими конструкциями как defineProps вновь идёт откат к использованию окружения.
Too much magic!
Workaround:
SFC.vue (non setup, js transpiled by webpack etc. compilers):
<template>...</template>
<script>
import { defineComponent } from 'vue';
import { opts } from './SomeComponent';

// export default only: https://github.com/vuejs/vue-loader/issues/1234#issuecomment-380222855
export default defineComponent(opts);
</script>
SomeComponent.js:
import { reactive } from 'vue';

const opts = {
// use props as optionsAPI, not defineProps
    props: {
        params: Object,
    },
    setup (props) {
        const items = reactive(props.params.items);

        // "computed"
        return {
            items,
        };
    }
}

export { opts };