vue-动态组件和异步组件

用来动态地挂载不同的组件。如果我们打算在一个地方根据不同的状态引用不同的组件的话,比如tab页,就可以用到这一标签。

<template>
  <div id="app">
    <el-button-group>
      <el-button type="primary" size="small" v-for="item in btnGroup" :key="item.id" @click="handleBtn(item.name)">{{item.name}}</el-button>
    </el-button-group>
    <div>
      <keep-alive>
        <component :is="curComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      curComponent: 'comA',
      btnGroup: [
        {
          id: 1,
          name: '组件一'
        },
        {
          id: 2,
          name: '组件二'
        }
      ]
    }
  },
  components: {
    comA: {
      template: `<input placeholder="请输入名字" type="text"/>`
    },
    comB: {
      template: `<p>2222222222</p>`
    }
  },
  methods: {
    handleBtn (name) {
      if (name === '组件一') {
        this.curComponent = 'comA'
      }
      if (name === '组件二') {
        this.curComponent = 'comB'
      }
    }
  }
}
</script>

当我们点击不同的按钮时,下面会切换不同的组件。实现动态组件的加载。is的值可以是一个已经注册的组件的名字或者一个组件的选项对象。

如果我们需要频繁的切换页面,每次都是在组件的创建和销毁的状态间切换,这无疑增大了性能的开销。那么我们要怎么优化呢?

Vue提供了动态组件的 缓存。keep-alive会在切换组件的时候缓存当前组件的状态,等到再次进入这个组件,不需要重新创建组件,只需要从前面的缓存中读取并渲染。

2、异步组件

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。

异步组件存在的意义在于加载一个体量很大的页面时,如果我们不设置加载的优先级的话,那么可能页面在加载视频等信息的时候会非常占用时间,然后主要信息就会阻塞在后面在加载。这对用户来说无疑不是一个很差的体验。但是如果我们设置加载的顺序,那么我们可以优先那些最重要的信息优先显示,优化了整个项目。

异步组件大致有以下几种定义方式:

Vue.componenet('async-component', function (resolve) {
    resolve({
        template: `<p>{{msg}}</p>`,
        data () {
            return {
                msg: '11111'
            }
        }
    })   
})

如你所见,这个工厂函数会收到一个 resolve 回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。

一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用

Vue.componenet('async-component', function (resolve) {
    // 这个特殊的 `require` 语法将会告诉 webpack
    // 自动将你的构建代码切割成多个包,这些包
    // 会通过 Ajax 请求加载
    require('[./my-async-component]', resolve) 
})

你也可以在工厂函数中返回一个 Promise,所以把 webpack 2 和 ES2015 语法加在一起,我们可以写成这样:

// 这个 `import` 函数会返回一个 `Promise` 对象。
Vue.component('async-component', () => import('./async-component'))

注意:import函数import语句作用是不一样的当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

```

原文链接:segmentfault.com

上一篇:xolvio-sync-webdriverio
下一篇:quadric-chimp

相关推荐

官方社区

扫码加入 JavaScript 社区