07 异步组件

作用：按需加载组件(性能优化)

<div id="app">
<!-- 3.使用子组件 -->
<App></App>
</div>
<script src="./vue.js"></script>
<script type='module'>
import xxx from './modules.js';
const App = {
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        asyncLoad() {
            this.isShow = !this.isShow;
        }
    },
    components: {
        Test:()=>import('./Test.js')
    },
    template: `
            <div>            
            <button @click='asyncLoad'>异步加载</button>
            <Test v-if='isShow'></Test>
            </div>
    `,
}
new Vue({
    el: '#app',
    data: {
    },
    components: {
        App
    }
})

//Test.js
export default  {
    data() {
        return {
            msg: 'mufeng'
        }
    },
    template: `
                <h3>{{msg}}</h3>
            `
}