Vue按需加载组件

今日在一个需求中遇到一个问题，困扰了一会儿。记录下来📝

问题场景：

在后台管理系统中，当用户点击修改时，会展现一个表单弹出框，因为只有当用户触发修改按钮才会请求这条数据的详细信息，如果form返回的数据都是一层的简单数据，无深层嵌套，就无大问题。但是今日遇到在form表单项中需要绑定form数据对象的子对象，随即出现程序报错。

//数据结构类似于
from:{
...
  item:null,
  goods:{
       name:null,
  }
...
}
//场景：现在表单的数据项需要v-model绑定goods数据下的name值

解决方案：

在这个弹出框加上了v-if等同于按需加载，当用户点击修改按钮时才会加载这个弹出框。因为弹出框和表格放在了同一页面，所以不能采取懒加载方案。

拓展方案：

方案一： vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。

{
   path: '/path',
   name: 'Path',
   component: resolve => require(['../components/Path'], resolve)
}

方案二：ES中的import（）

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Demo1 = () => import('../components/Demo1')
const Demo2 = () => import('../components/Demo2')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Demo = () => import(/* webpackChunkName: 'Demo' */ '../components/Demo')
// const Demo2 = () => import(/* webpackChunkName: 'Demo' */ '../components/Demo2')
export default new Router({
    routes: [
        {
            path: '/demo1',
            name: 'Demo1',
            component: Demo1
        },
        {
            path: '/demo2',
            name: 'Demo2',
            component: Demo2
        }
    ]
})

方案三：webpack提供的require.ensure()

        {
            path: '/demo',
            name: 'Demo',
            component: resolve => require.ensure([], () => resolve(require('../components/Demo')), 'demo')
        },
        {
            path: '/hello',
            name: 'Hello',
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
        }