动态和异步组件

阅读: 3768 评论：0

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

我们之前曾经在一个多标签的界面中使用 is 属性来切换不同的组件：

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

component标签不是HTML原生的，而是Vue设计的。

我们看下面的例子：

<div id="dynamic-component-demo" class="demo">
  <button
     v-for="tab in tabs"
     :key="tab"
     :class="['tab-button', { active: currentTab === tab }]"
     @click="currentTab = tab"
   >
    {{ tab }}
  </button>

  <component :is="currentTabComponent" class="tab"></component>
</div>

const app = Vue.createApp({
  data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive']
    }
  },
  computed: {
    currentTabComponent() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

app.component('tab-home', {
  template: `<div class="demo-tab">Home component</div>`
})
app.component('tab-posts', {
  template: `<div class="dynamic-component-demo-posts-tab">
    <ul class="dynamic-component-demo-posts-sidebar">
      <li
        v-for="post in posts"
        :key="post.id"
        :class="{
          'dynamic-component-demo-active': post === selectedPost
        }"
        @click="selectedPost = post"
      >
        {{ post.title }}
      </li>
    </ul>
    <div class="dynamic-component-demo-post-container">
      <div v-if="selectedPost" class="dynamic-component-demo-post">
        <h3>{{ selectedPost.title }}</h3>
        <div v-html="selectedPost.content"></div>
      </div>
      <strong v-else>
        Click on a blog title to the left to view it.
      </strong>
    </div>
  </div>`,
    data() {
    return {
      posts: [
        {
          id: 1,
          title: 'Cat Ipsum',
          content:
            '<p>Dont wait for the storm to pass, ......</p>'
        },
        {
          id: 2,
          title: 'Hipster Ipsum',
          content:
            '<p>Bushwick blue bottle scenester helvetica ugh, .......</p>'
        },
        {
          id: 3,
          title: 'Cupcake Ipsum',
          content:
            '<p>Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. ......</p>'
        }
      ],
      selectedPost: null
    }
  }
})
app.component('tab-archive', {
  template: `<div class="demo-tab">Archive component</div>`
})

app.mount('#dynamic-component-demo')

现在我们有Home、Posts、Archive三个组件，其中的Home和Archive就是做个样子，主要还是Posts组件。

Posts组件有个列表，点击任何一个，就会显示其具体内容。

问题在于，假设你当前在看Cat Ipsum这个blog，突然想切换到Home页面去看一下，看完后，又切回来，然后你会发现，你先前看的文章没了，Posts组件回到了初始状态。

通俗的例子就是你在手机上用app看小说，临时切换去看了眼微信，再切回来发现小说关闭了，你不但得重新打开小说，还要自己去找已经看到的章节。

这种场景就需要我们能够缓存组件的状态，Vue提供了一个自己设计的 <keep-alive> 标签以实现该功能。

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

可以自行测试，查看具体效果。

异步组件

动态组件是已经加载好了组件，然后在组件中进行切换。

异步组件则是按需加载，没到我上场的时候，我就在后台先歇着。

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

为了简化代码，Vue 提供了一个 defineAsyncComponent 方法：

const { createApp, defineAsyncComponent } = Vue

const app = createApp({})

const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)

如你所见，此方法接受一个返回 Promise 的工厂函数。从服务器检索组件定义后，应调用 Promise 的 resolve 回调。你也可以调用 reject(reason)，来表示加载失败。

把 webpack 2 和 ES2015 语法相结合后，我们可以实现异步导入模块：

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)

当在局部注册组件时，你也可以使用 defineAsyncComponent

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

Provide和Inject 模板引用和边界处理

评论总数： 0

点击登录后方可评论

动态和异步组件

在动态组件上使用 keep-alive

异步组件

评论总数： 0

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