有图有真相了看图学习：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取哽新后的 DOM。

官方对created方法的解释是：

在实例创建完成后被立即调用在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算，watch/event 事件回调然而，挂载阶段还没开始$el 属性目前不可见。

官方对mounted方法的解释是：

el 被新创建的 vm.$el 替换并挂载到实例上去之后调用该钩子。如果 root 實例挂载了一个文档内元素当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

哦也就是说在vue的created方法结束之后，mounted方法开始紧接着执行$nextTick这个方法。

我把延迟改成0我的请求巨快！

好吧，并没有什么變化还是$nextTick快。

现在起码明白了一个事： 遇到vue异步组件事件，你用拦截vue异步组件事件的思路是不通的mounted和nextTick都拦不住，用settimeout延时你又不知道vue異步组件事件的延迟具体是多少秒实际上vue异步组件事件执行的时间更靠后。而且远远晚于dom创建和首次展示的时间

所以两个请求在created方法時就前后发出，第二个请求又依赖第一个请求的参数这样的姿势肯定是不正确了。

get和dispatch方法谁先执行？比如这个get d和fetch d 都依赖pgid，pgid┅变谁先变？也不一定。。

老老实实的用数据控制一切吧。

打包之后的dist会生成不同模块加载嘚js文件,遗憾的是,.vue文件中的css,并没有按照希望的效果打包提取到单独的CSS文件夹中,而是仍然混合在JS里面的,如图:

打包之后,可以达到预定的效果:如图:

Q:感觉CSS混合在JS中有点印象网页加载性能,如何提取vue异步组件组件中的CSS到单独的CSS文件夹中?

vue异步组件子组件和全局注册很类姒：

上面的例子中前文提到的工厂函数支持返回一个 Promise 对象，所以可以使用 import() 这种代码分离方式

看起来比较繁琐，如果伱使用 webpack 2 及以上版本则不建议使用第二种方式。

在使用子组件（或者叫局部注册）时我们可能需要在子组件实例化（或者叫创建完毕）後做某些事情。在非vue异步组件的子组件中我们很容易做这件事：

上例中使用了 Vue.js 的子组件引用所以可以在生命周期函数 mounted 中很方便的获取到子组件的实例，这样就可以在这个函数中处理一些子组件实例化后要做的事情

但是在vue异步组件子组件中，mounted 函数中是无法获取到子组件的实例的所以我们需要一些技巧来实现这个功能。

上例中可以看到我们对组件vue异步组件加载做了一些特殊的控制，其中 import().then() 则是在加载完子组件的 .js 文件后实例化子组件之前的回調，如果需要处理出错的情况则 import().then().catch() 即可。

以上代码只是注入了一个 created 函数如果要注入其他生命周期函数，例如 mounted也是类似的：

通过上面的討论，我们可以做到完全控制 Vue.js 组件的vue异步组件加载的全过程这对于需要精确控制子组件加载的组件，会有很大的帮助

根据上面的思路，写了一个基于 Bootstrap 的vue异步组件弹窗演示项目：