一个向导是由几个步骤组成的组件. 每个步骤都是不同的视图. 让我们看看如何创建一个向导,该向导在 Vue.js 中懒惰地加载其部分。
魔法师的步骤
每个步骤在一个向导中是向导显示的屏幕之一. 让我们在每个步骤中创建一个组件,并使用相同的命名模式命名它,例如Wizard-step1.vue,Wizard-step2.vue,Wizard-step3.vue。
1[label Wizard-step1.vue]
2<template>
3 <div>
4 Step 1
5 </div>
6</template>
魔法师
这是魔法发生的组件. 魔法师有一个步骤计数器,我们将使用它来懒惰加载,以及一个将增加该计数器的按钮。
1[label Wizard.vue]
2<template>
3 <div>
4 <button @click="next">Next</button>
5 </div>
6</template>
7
8<script>
9export default {
10 data: () => ({ step: 1 }),
11 methods: {
12 next() {
13 this.step++;
14 }
15 }
16};
17</script>
这个想法是,向导将相应的组件加载,取决于当前的步骤,对于懒惰的加载,我们可以使用动态导入,但这是无同步的,并返回了一个承诺,而组件的渲染是同步的。
Vue给了我们一些我们可能能够为我们的目的使用的功能:
- ** [同步组件] (https://vuejs.org/v2/guide/components.html#Async-Components)**: 传递一个函数(它返回一个承诺)而不是一个对象允许同步懒惰的负载组件,至少在使用本地和全球注册时是如此. 问题在于这些组件是事先知道的,我们的例子并非如此。
- ** 动态组件**: 使用 QQ 组件 QQ 保留元素, 我们可以动态地热洗组件 。 然而,我们也有同样的问题,我们必须事先知道这些组成部分。 ( (英语). 这里的宝藏:尽管Vue.js docs上没有记录, 我们可以使用一个计算出来的属性和动态导入结合两个特性的功率, 因为元素还允许得到一个函数返回一个在引擎盖下进行某种本地注册的许诺。 [动态导入] (https://github.com/tc39/proposal-dynamic-import)是一种JavaScript特性,允许在运行时加载一个模块,类似于如何需要与Node.js合作. 一些模块捆绑器,如Webpack或Rollup,使用动态导入作为代码分拆点,并创建一个单独的捆绑,在达到代码时按需要加载. 将这部分添加到组件中:
1[label Wizard.vue]
2<template>
3 <div>
4 <button @click="next">Next</button>
5 <component :is="stepComponent"/>
6 </div>
7</template>
8
9<script>
10export default {
11 data: () => ({ step: 1 }),
12 computed: {
13 stepComponent() {
14 return () => import(`./Wizard-step${this.step}.vue`);
15 }
16 },
17 methods: {
18 next() {
19 this.step++;
20 }
21 }
22};
23</script>
我正在创建stepComponent计算属性,该属性返回一个函数,该函数加载当前步骤给出的正确组件,然后在上面,我正在使用<component>元素并将其绑定到stepComponent。
如果你尝试它,它应该起作用. 但是,如果你点击下一个按钮,它不会更新. 这是因为它没有评估计算属性中的任何反应性属性,因为步骤是在返回的函数内。
你可以尝试使用一种方法,而不是缓存,但你会陷入无限的渲染循环(试试自己)。
解决方案是让Vue评估步骤状态属性,因此,我们可以简单地称之为:
1[label Wizard.vue]
2stepComponent() {
3 this.step; // Just call it
4 return () => import(`./Wizard-step${this.step}.vue`);
5}
再次尝试,打开浏览器开发工具的网络卡,享受观看你的块如何加载,当你按下一个按钮! ✨