从服务器获取字符串生成Vue组件

从服务器获取字符串生成Vue组件

在一些应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块，这时候我们就需要用到异步组件。

准备工作

我们需要用到Vue.component(‘my-component’, { /* … */ })这个api， 在我们通常使用的vue-cli构建出的应用中，为运行时版本的vue构建版本，但是我们这种情况需要在客户端编译模板(传入一个字符串给 template 选项)，就需要加上编译器，即完整版

完整版：同时包含编译器和运行时的版本。
编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

注意：运行时版本比完整版体积要小大约 30%，考虑之后确定使用则需要在打包工具里配置一个别名：

我的vue-cli版本是3.0所以，我在vue.config.js中写入

module.exports = {
 configureWebpack: config => {
    //配置成完整版以使用template
    config.resolve.alias.vue$ = 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
}

异步组件

Vue.component(‘my-component’, { /* … / })的用法，在官网的各个例子都有，但是我们目前想通过服务器获取Vue.component(‘my-component’, { / … */ })中第二个参数的template中的数据。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'，
      data() {
      	return {
			.....
		}
      },
      methods: {
          .....
	  }
    })
  }, 1000)
})

Vue 只有在这个组件需要被渲染的时候才会触发该上面的函数，且会把结果缓存起来供未来重渲染。