V-ifvsLazyloadingcomponent

使用Vue的异步组件，结合V-if和Lazy loading的方式进行懒加载。

在Vue的标准中，通常我们可以使用V-if，来判断某个组件是否需要被渲染，从而达到优化页面性能的目的。但是如果某个组件非常庞大或者特别复杂，直接使用V-if会导致页面加载缓慢的问题，为了改善这个问题，我们可以通过组件分块懒加载的方式，来提升页面渲染速度。

步骤：

1. 创建异步组件

如下示例代码，创建了一个异步组件 name: HelloWorld，并指定其所在的组件资源路径。

Vue.component('HelloWorld', function(resolve, reject) { axios.get('/components/HelloWorld.vue') .then(function(response) { resolve({ template: response.data }) }) .catch(function(error) { console.log(error); }); });

2. 在V-if中使用异步组件

如下示例代码，我们在V-if指令中使用了异步加载的组件，且将其设置为true，从而异步加载 HelloWorld 组件。

<template> <div> <button @click="show = !show">toggle</button> <div v-if="show"> <HelloWorld /> </div> </div> </template>

<script> import HelloWorld from './HelloWorld'

export default { name: 'App', components: { HelloWorld }, data() { return { show: true } } } </script>

3. 结合Lazy loading

在vue-router中设置组件的懒加载，结合上述方法，可以实现简单直观的Lazy loading。

// Async load router config const About = resolve => require(['@/pages/About.vue'], resolve) const Home = resolve => require(['@/pages/Home.vue'], resolve) const Test = resolve => require(['@/pages/test/Test.vue'], resolve)

const routes = [