vue组件深入-动态

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

我们可以使用 is attribute 来切换不同的组件

1	<my-componet v-bind:is="currentTabComponent"></my-component>

在切换组件的时候, 我们有时候需要保持这些组件的状态, 避免反复冲渲染导致性能的问题.
为了解决这个问题, Vue 为我们提供了 <keep-alive> 元素将其动态组件包裹起来

<!-- 失活的组件将会被缓存 -->
<keep>
  <component v-binf:is="currentTabComponent"></component>
</keep>

<keep-alive> 元素要求被切换的组件都有自己的名字.

异步组件

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

// 异步组件-在1秒后渲染
Vue.component('my-component', function(resolve, reject) {
  setTimieout(() => {
    resolve({ template: '<h1>标题</h1>' })
    // reject() 组件加载失败
  }, 1000)
})

将异步组件和webpack的code-splitting功能一起配合使用

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

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

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

局部注册时, 也可以直接提供一个返回Promise的函数

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

处理加载状态

异步组件工厂函数也可以返回一个如下格式的对象

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个`Promise`对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延迟时间, 默认200毫秒
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了
  // 则使用加载失败时使用的组件 默认 `Infinity`
  timeout: 3000
})

在动态组件上使用 keep-alive

异步组件

处理加载状态

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