Vue-异步组件

异步组件介绍

将应用分割成为小一些的代码块，在需要的时候才从服务器加载一个模块，

工厂函数的方式定义组件，异步解析组件定义。只有在需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

//Ensure o function called only once 

export function once(fn:Function):Function {
    let called = false
    return function() {
        if (!called) {
            called = true;
            fn.apply(this,arguments);
        }
    }
}

// 传入一个函数返回一个新的函数。巧妙地利用闭包和一个标志位保证了函数只执行一次。

$forceUpdate 作用

Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if(vm._watcher) {
        vm._watcher.update()
    }
}

$forceUpdate的逻辑非常简单，就是调用渲染watcher 的update方法，让渲染watcher对应的回掉函数执行。也就是触发了组件的重新渲染，之所以这么做是因为 Vue通常是数据驱动视图重新渲染，但是整个异步组件加载过程是没有数据发生变化的，所以通过执行 $forceUpdate 可以强制组件重新渲染一次。

异步组件的使用方法： 比如经常使用的loading ,model 等组件， 在点击按钮需要的时候在加载对应的资源。

<template>
  <div class="pc-async-components">
    <button @click="asyncLoadDemo">click</button>
    <demo v-if="showDemo" />
  </div>
</template>

<script>
export default {
  name: "button-load",
  data() {
    return {
      showDemo: false
    };
  },
  components: {
  // 局部注册方式： 直接提供一个返回的Promise的函数
    demo: () => import("../../components/demo.vue")
  },
  methods: {
    asyncLoadTest() {
      this.showDemo = true;
    }
  }
};
</script>

优势： 释放页面的负载，提高页面加载速度。

由于异步加载组件需要动态加载js 有一定的网路延迟，而且有加载失败的时候，因此需要在开发异步组件相关逻辑的时候需要设计loading组件和error 组件，并在适当的时机渲染它们。 因此有了高级异步组件。

const AsyncComp = () => ({
  // 需要加载的组件。应当是一个 Promise
  component: import('./MyComp.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComp,
  // 出错时渲染的组件
  error: ErrorComp,
  // 渲染加载中组件前的等待时间。默认：200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
  timeout: 3000
})
Vue.component('async-example', AsyncComp)