技術標籤：Vuevue

非同步元件

1）使用import 函式

2）非同步元件，載入體積大的元件如富文字編輯器，echarts等，效能優化的一種形式

ps:檢視效果開啟控制檯 network中

<template>
  <!-- rights元件 -->
  <div class="header">
    <Inp v-if="show"></Inp>
    <button @click="show=true">點選確認非同步載入</button>
    <p>非同步載入元件：是使用的時候才會載入元件，適合體積大的元件比如富文字編輯器，echarts等</p>
    <p>同步載入元件：是打包的時候就已經載入了</p>
  </div>
</template>

<script type="text/ecmascript-6">
// 這裡就是同步載入元件
// import Inp from './inp'
export default {
  data() {
    return {
      show: false
    }
  },
  components: {
    Inp: ()=> import('./inp')
  }
}
</script>
 

<template>
  <!-- inp元件 -->
  <div>
    this is inp
  </div>
</template>

<script>
export default {
}
</script>