11-动态组件、is特性、keep-alive、异步组件

动态组件:
在不同组件之间进行动态切换,通过<component’> 元素加一个特殊的 is 特性实现

动态组件中可以包括已注册组件名,或组件的选项对象 ( 此例指父级中 data数据 )

  <div id="root">
    <component :is="type"></component> 		/* component 中加上 is 特性 */
    <button @click="handleClick"></button>
  </div>

  Vue.component('child-one',{
    template: `<div v-once>one</div`
  });
  Vue.component('child-two',{
    template: `<div v-once>two</div`
  });

  var vm = new Vue({
    el: '#root',
    data: {
      type: 'child-one'
    },
    methods: {
      handleClick(){
        this.type = this.type === 'child-one' ? 'child-two' : 'child-one';
      }
    }
  });

解析 DOM 模板时的注意事项: is 特性解决元素的非法嵌套

  /* 错误 */
  <table'>
    /* 会被作为无效的内容提升到外部 */
    <blog-post-row'></blog-post-row'>
  </table'>

==================== 动态组件 & 异步组件 =====================

keep-alive
1、包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
2、它自身不会渲染一个 DOM 元素，也不会出现在父组件链中
3、当组件在 <keep-alive’> 内切换时,它的 activated 和 deactivated 两个生命周期钩子会对应执行

Props

include: string | RegExp 	只有名称匹配的组件会被缓存
exclude: string | RegExp 	任何名称匹配的组件都不会被缓存
max: number 				最多可以缓存多少组件实例

keep-alive:
使用 is 特性来切换不同的组件, 会导致重复渲染影响性能, <keep-alive’>能够使组件实例在创建时被缓存

/* 反复切换回影响性能 */
<component :is="currentTabComponent"></component>

/* 未被激活的组件将会被缓存 */
<keep-alive>
	<component :is="currentTabComponent"></component>
</keep-alive>

include 和 exclude 属性允许组件有条件地缓存

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
	<component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
	<component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
	<component :is="view"></component>
</keep-alive>

max:
最多缓存多少组件实例,一旦数字达到,新实例被创建之前,缓存组件中最久没有被访问实例会被销毁

<keep-alive :max="10">   /* 必须 v-bind 绑定 这样才是 JS 表达式 */
	<component :is="view"></component>
</keep-alive>

异步组件

只在需要时才从服务器加载模块,且会把结果缓存供未来重新渲染
以工厂函数的方式定义组件,resolve()表示加载成功, reject()表示加载失败

Vue.component('async-example', function (resolve, reject) {
  setTimeout(() => {
    return resolve({template: '<div>I am async!</div>'})
  }, 1000)
})

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

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

使用局部注册的时候，可以直接返回 Promise 函数

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

处理加载状态
…