Vue.js記法:Cacheを利用する

v-onceにより重いhtmlを一回のみloadさせる。

Vue.component('terms-of-service', { template: ` <div v-once> <h1>Terms of Service</h1> ... a lot of static content ... </div> ` })

keep-aliveで Cache current Component state

<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>

必要な場合に、サーバからcomponentを取得しcacheする

//load component by component.vue/js
Vue.component( 'async-webpack-example', () => import('./my-async-component') )

// load local comonent by component.vue/js new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })

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