20171016_vue异步加载所需组件

openks commented 6 years ago

最近做项目碰到一个问题：

问题

一个选项卡容器里有多个选项卡，每个选项卡都有很多内容，所以做成每个选项卡一个组件，正常写下去是这样的

<template>
<el-tabs v-model="activeName">
  <el-tab-pane label="用户管理" name="first">用户管理
    <el-comp-a></el-comp-a>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理
    <el-comp-b></el-comp-b>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理
    <el-comp-c></el-comp-c>
  </el-tab-pane>
</el-tabs>
</template>
<script>
import componentA from "@/components/componentA";
import componentB from "@/components/componentB";
import componentC from "@/components/componentC";

export default {
  components: {
    "el-comp-a":  componentA,
    "el-comp-b":  componentB,
    "el-comp-c":  componentC,
  },
  data() {
    return {
      activeName: 'second'
    };
  }
};
</script>

其中这三个组件每个都有AJAX请求,这样就相当于打开这个页面就会同时发送三个请求，如果用户不点击配置管理和角色管理选项卡则多请求了两次

希望实现功能：

点击该选项卡的时候再做该选项卡的请求并展示数据

实现方案：

<el-tabs v-model="activeName">
  <el-tab-pane label="用户管理" name="first">用户管理
    <el-comp-a v-if="activeName==first"></el-comp-a>
  </el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理
    <el-comp-b v-if="activeName==second"></el-comp-b>
  </el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理
    <el-comp-c v-if="activeName==third"></el-comp-c>
  </el-tab-pane>
</el-tabs>

只需增加v-if的条件判断即可。问题解决
因为v-if是惰性的

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

update 2018-03-30 10:59:45 这种情况下a,b,c3个组件还是会先从服务端下载下来，只是不做渲染，在v-if变为true时渲染

组件的异步加载前提是这个组件不需要被渲染，在渲染的时候发现需要加载，就先加载，加载完之后再渲染即可如果你想点击某个事件后弹出一个自定义组件，那这个自定义组件不能只用一个隐藏属性让它不显示，即便不显示仍会渲染只不过是display:none状态，与v-show一个道理
必须要用v-if让它在不显示的时候不渲染，点击后v-if变为true的时候再渲染，渲染时需要异步加载，加载完后渲染

openks commented 6 years ago

这里是路由组件的懒加载 #43

openks commented 6 years ago

<el-comp-a v-if="activeName==first"></el-comp-a>
<script>
    const componentA = () => import('@/components/componentA');
</script>

而这种方法会在if条件为true时下载组件文件并渲染

openks / learn-vue

20171016_vue异步加载所需组件 #56

问题

希望实现功能：

实现方案：