Vue如何制作高度模块化的程序（二）

• 这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

4. 多个 v-if

建议永远不要使用各种 v-if 条件从 Vue 组件的渲染函数渲染多个元素。使用< div >包装元素，<template>包装额外的元素。

< template v-if=“true” >
 < p >Paragraph 1 < / p >
 < p >Paragraph 2 < / p >
 < p >Paragraph 3 < / p >
< / template >

5. 第三方软件包

当一个开发团队在同一个项目上工作时，安装的软件包的数量变得如此之高，以至于没有人关心它。它间接影响应用程序的性能。为了提高性能，您可以使用 import 导入软件包来查看导入的模块化库，并确定它在增长时出现的问题。

6. 保持一致性 – 指令速记

常用指令的简写。

• @ 用于 v-on
• ：用于 v-bind
• #用于 v-slot

在这里，您应该非常小心，要么应该在整个项目中使用它们，要么从一开始就不要使用它。使您的项目更加一致，代码可读性更高。

7. 代码拆分

性能很重要，一旦应用程序变得很大，它就变得非常重要，使其尽可能更快速和高效。

异步组件

Vue.component('async-component', (resolve) => {
  resolve({
    template: '< div >Async Component< / div >',
    props: [ 'myprop' ]
  });
});

单个文件组件

< template >
  < div >A sync Component < / div >
< / template >
< script >
  export default {
    props: [ 'myprop' ]
  }
< / script >

这种导入语法甚至更简洁：

new Vue({ 
  el: '#app',
  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
});

动态模块加载

export default {
  template: '< div >Async Component< /div >',
  props: [ 'myprop' ]
}

你可以尝试这样的事情;

import AsyncComponent from './AsyncComponent.js'`;
Vue.component('async-component', AsyncComponent);

8. 路由

在构建spa时，最常见的是使用客户端路由。 Vue没有内置路由，因为它有一个名为VueRouter的官方插件，它很容易使用，并提供了所有功能，您需要构建一个强大的应用程序。 如果你正在使用VueCLI，你可以在不安装npm-install Vue-router的情况下将它添加到你的应用程序中。

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持