Vue学习笔记-深入组件(动态组件/异步组件)

在动态组件上使用 keep-alive：

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

 

 

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

 

异步组件

<component :is="currentTabComponent"></component>

components: {
    homePage: function(resolve) {
        require(['../homePage'], resolve)
    },
    resourceManage: function(resolve) {
        require(['../resourceManage'],resolve)
    }
}

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

require 像是一个带回调的异步请求 成功数据在resolve

工厂函数会收到一个 resolve 回调

你也可以在工厂函数中返回一个 Promise

 

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

局部注册直接返回一个promise的函数

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})