import Vue from 'vue';
export default {
    setup(props, context) {
        console.log(Vue.version);
        return {};
    }
};

function nextTick(callback?: () => void): Promise<void>

<template>
    <div class="test_demo">
        <h2 class="text">{{ text }}</h2>
        <button @click="onBtnClick">更新</button>
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
const text = ref('test_0');
const onBtnClick = () => {
    text.value = 'test_1';
    nextTick(() => {
        const text = (
            document.querySelector<HTMLElement>('.text') as HTMLElement
        ).innerText;
        console.log(text);
    });
    text.value = 'test_2';
};
</script>

<script setup lang="ts">
// 啟用了 TypeScript
import { ref } from 'vue'
const props = defineProps({ msg: String })
const count = ref(1)
</script>
<template>
  <!-- 啟用了類型檢查和自動(dòng)補(bǔ)全 -->
  {{ count.toFixed(2) }}
</template>

import { defineComponent } from 'vue'
export default defineComponent({
  // 啟用了類型推導(dǎo)
  props: {
    message: String
  },
  setup(props) {
    props.message // 類型：string | undefined
  }
})

export default /*#__PURE__*/ defineComponent(/* ... */)

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => {
    return new Promise((resolve, reject) => {
        // ...從服務(wù)器獲取組件
        resolve(/* 獲取到的組件 */);
    });
});

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(
    () => import('./components/MyComponent.vue')
);

 const AsyncComp = defineAsyncComponent({
        // 加載函數(shù)
        loader: () => import('./Foo.vue'),
        // 加載異步組件時(shí)使用的組件
        loadingComponent: LoadingComponent,
        // 展示加載組件前的延遲時(shí)間，默認(rèn)為 200ms
        delay: 200,
        // 加載失敗后展示的組件
        errorComponent: ErrorComponent,
        // 如果提供了一個(gè) timeout 時(shí)間限制，并超時(shí)了
        // 也會(huì)顯示這里配置的報(bào)錯(cuò)組件，默認(rèn)值是：Infinity
        timeout: 3000
    });

import { defineCustomElement } from 'vue';
const MyVueElement = defineCustomElement({
    /* 組件選項(xiàng) */
});
// 注冊自定義元素
customElements.define('my-vue-element', MyVueElement);