// 工厂函数执行 resolve 回调 Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包, 这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) }) // 工厂函数返回 Promise Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') ) // 工厂函数返回一个配置化组件对象 const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 })
异步组件的渲染本质上其实就是执行2次或者2次以上的渲染, 先把当前组件渲染为注释节点, 当组件加载成功后, 通过 forceRender 执行重新渲染。或者是渲染为注释节点, 然后再渲染为loading节点, 在渲染为请求完成的组件
2.路由的按需加载
webpack< 2.4 时 { path:'https://www.jb51.net/', name:'home', components:resolve=>require(['@/components/home'],resolve) } webpack> 2.4 时 { path:'https://www.jb51.net/', name:'home', components:()=>import('@/components/home') }
import()方法由es6提出，import()方法是动态加载，返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。
6.动态组件
场景:做一个 tab 切换时就会涉及到组件动态加载
<component v-bind:is="currentTabComponent"></component>
但是这样每次组件都会重新加载,会消耗大量性能,所以<keep-alive> 就起到了作用
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
这样切换效果没有动画效果,这个也不用着急,可以利用内置的<transition>
<transition> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> </transition>
7.递归组件
场景:如果开发一个 tree 组件,里面层级是根据后台数据决定的,这个时候就需要用到动态组件
// 递归组件: 组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可以了。 // 设置那么House在组件模板内就可以递归使用了,不过需要注意的是， // 必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded // 组件递归用来开发一些具体有未知层级关系的独立组件。比如： // 联级选择器和树形控件 <template> <div v-for="(item,index) in treeArr"> 子组件，当前层级值： {{index}} <br/> <!-- 递归调用自身, 后台判断是否不存在改值 --> <tree :item="item.arr" v-if="item.flag"></tree> </div> </template> <script> export default { // 必须定义name，组件内部才能递归调用 name: 'tree', data(){ return {} }, // 接收外部传入的值 props: { item: { type:Array, default: ()=>[] } } } </script>
递归组件必须设置name 和结束的阀值
8.函数式组件
定义:无状态,无法实例化，内部没有任何生命周期处理方法
规则:在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。