从服务器获取字符串生成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 只有在这个组件需要被渲染的时候才会触发该上面的函数,且会把结果缓存起来供未来重渲染。

Logo

前往低代码交流专区

更多推荐