Vue - 4.异步组件加载

在大型应用中，可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义，只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

通过export default抛出组件，父组件内通过 Test: () => import('./Test') ( 工厂函数 ) 引入子组件

const App = {
    data() {
        return {
            isShow: false
        }
    },
    template: `
        <div>
            <Test v-if='isShow'></Test>//isShow值为false不被加载和渲染
            <br/>
            <button @click='asyncLoad'>异步加载</button>//2.点击按钮触发方法
        </div>
    `,
    methods: {
        asyncLoad() {//3.给isShow取反，为true则加载子组件
            this.isShow = !this.isShow;
        }
    },
    components: {
        Test: () => import('./Test')//4.向服务器发送js文件请求，异步加载子组件
    }
}