vue 同步/异步控制组件加载顺序

vue 同步/异步控制组件加载顺序

后续代补充
问题介绍：总所周知，组件化一直都是vue的核心思想。如果一个页面包含的内容太多，我们都会将部分功能抽离出来，封装成一个单独的组件（比如弹出框）。随着子组件数量的增加，会引发以下问题：
1组件的数据加载问题
2异步加载子组件的问题
3高级异步组件渲染
4 vue 动态渲染 tab的component

1组件的数据加载问题
子组件的数据，一般是通过定义props变量，然后从父组件获取，但如果父组件的数据，是通过请求后端接口（异步操作）获取。这时候，子组件获取到的，只能是父组件最初定义的变量的值，这可能会导致子组件报错。
解决方法：可以通过给子组件设置 v-if。当父组件数据加载完毕，再去加载子组件。

2异步加载子组件的问题
问题描述： 比如我现在子组件2 必须先等到子组件1加载完毕之后，再去加载，这时候应该怎么办呢？
解决方法：可以通过v-if或者v-show配合获取数据 来进行操作。当子组件1取到了数据，就让他显示出来，接着子组件2取到了数据，也让他显示出来，但是这里获取数据存在一个异步的问题，就是：你不知道是子组件1先获取到数据，还是子组件2先获取到数据，这时候你可以运用es7 的 async和await，去控制组件的显示。

3高级异步组件渲染
ES6 import()返回一个 Promise 对象
对于一些加载比较缓慢的，比如视频页面，还有一些无关紧要的，比如弹出框之类的？我们可以先使用高级组件进行加载

延迟加载有意义的另一种情况是当您具有延迟渲染的组件时。这些组件可以是工具提示，弹出窗口，模态等

/
.html#Handling-Loading-State

4 vue 切换 tab 动态渲染component
当项目中，当我们用到tab选项卡的时候，一般我们都会将几个tab项分成几个组件component。但现在一进来页面，就会去加载所有component内容，这就会延迟页面加载时间。那怎样才能动态渲染component呢(按需加载tab项)？
解决方法：可以通过 Vue 的 元素加一个特殊的 is 特性来实现

< el-tab-pane v-for="(item, index) in editableTabs" :label=“item.title” :name=“item.name”>
< component :is=“t”></ component >
</ el-tab-pane>
参考文档：
.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6