异步组件

异步组件是指：组件所需数据是异步加载的。它的渲染策略如下：

  • 如果一个异步组件初次渲染，当数据没有加载完成时，会返回一个注释节点作为占位符， 待数据加载完毕后，替换成最终的元素
  • 如果用一个异步组件去更新之前的元素，当数据没有加载完成时，会保留当前元素不变， 待数据加载完毕后，替换成最终的元素

异步组件在当你的组件逻辑依赖异步加载的数据时非常有用，因为数据没加载完成，组件 不会渲染，能避免处理数据时，由于数据未定义造成报错。

定义一个异步组件很简单，只需要在组件的_init()周期函数中返回Promise对象即可。

  1. var AsyncComponent = Intact.extend({
  2.     template: '<div>当前数据为：{self.get("data")}</div>',
  3.     _init: function() {
  4.         // 模拟接口请求，返回Promise
  5.         var self = this;
  6.         return new Promise(function(resolve, reject) {
  7.             setTimeout(function() {
  8.                 self.set('data', 'Intact');
  9.                 resolve();
  10.             }, 1000);
  11.         });
  12.     }
  13. });
  1. var AsyncComponent = self.AsyncComponent;
  3. <div>
  4.     <AsyncComponent v-if={self.get('show')} />
  5.     <button ev-click={self.set.bind(self, 'show', !self.get('show'))}>
  6.     {self.get('show') ? '销毁' : '渲染'}异步组件
  7.     </button>
  8. </div>
  1. Intact.extend({
  2.     template: template,
  3.     _init: function() {
  4.         this.AsyncComponent = AsyncComponent;
  5.     }
  6. });

可以看到，当渲染组件时，并不会立即渲染，而是等待1s后才渲染。Intact内部会很好地管理 异步组件，所以即使你连续多次点击，它也会被正确地创建和销毁。

将一个异步组件改为同步组件只需一步：去掉_init()中关键词return即可。