Vue组件按需引入时v-if和v-show的区别

普通加载： 在父组件中先import子组件，然后在components模块中注册子组件，在进 入页面时，会随着加载当前页面的js文件就加载子组件的内容；子组件的内容和父组件的内容在同一个js文件；

按需加载：子组件显示的时候，才会去加载子组件的内容；子组件内容和当前页面的js不是一个文件；

v-if: 在条件为真时才去加载需要显示的组件；条件为真时元素才会渲染出来；

v-show: 不管条件是否为真，在一进入页面就会去加载组件；且页面上元素已经渲染了，只是将其隐藏而已；

组件引用时使用按需引入的方式

export default {
    name: 'cascadeTest',
    // 组件按需引入的写法
    components: {
          // cascadeTab: () => import('../components/cascade/cascadeTab/index')
          cascadeTab: resolve => require.ensure([], () =>                         
            resolve(require('../components/cascade/cascadeTab/index')), 'cascadeTab')
  },
}

普通引入方式：

import cascadeTab from '../components/cascade/cascadeTab/index';

export default {
    name: 'cascadeTest',
    components: {
       cascadeTab
    }
}

使用按需引入时测试：

1） v-show=false或true时： 一进入当前页面就加载当前页面组件和页面的子组件

 

 2）v-if=false时；只加载当前页面组件；

 2）v-if=true时；进入当前页面就加载了当前页面组件的子组件；

 全文参考：

Vue性能优化之组件按需加载（以及一些常见的性能优化方法） - 渴望成为大牛的男人 - 博客园