首页

在认识了传统Html+js对比Vue.js是不显得那么“便利”后，就需要更深入的学习vue了，就需要了解一下Vue强大的组件化开发思想。

Vue的组件化开发思想

在初步学习前端时，我就想过为何不把一个繁杂的页面分成多个模块来开发，这样不就会方便很多吗？而这就是vue中的核心开发思想之一---组件化开发思想。

Vue.js 的组件化开发思想是其核心特性之一，它使得开发者能够构建可复用的 UI 组件，并通过组合这些组件来构建复杂的用户界面。

例如：

在初始的Src下的main.js与App.vue就能够稍稍体现这一思想。

这里就要介绍一下.vue后缀的文件了

.vue后缀的文件

.vue 后缀的文件是 Vue.js 单文件组件（Single File Component, SFC）的标准格式。这种文件类型允许你在一个单独的文件中定义一个完整的 Vue 组件，包括它的模板、脚本和样式。这种组织方式有助于保持代码的清晰和可维护性，尤其是在大型项目中。

一个典型的 .vue 文件由三个主要部分组成：

模板 (<template>) ：
- 这部分定义了组件的 HTML 结构。
- 可以使用 Vue 模板语法，比如插值表达式 {{ }}、条件渲染 v-if、循环 v-for 等。
脚本 (<script>) ：
- 这部分包含了组件的 JavaScript 逻辑。
- 在这里你可以定义组件的数据属性、方法、计算属性、监听器等。
- 默认情况下，这部分是普通的 JavaScript 代码，但你也可以使用 TypeScript 或其他 JavaScript 超集。
样式 (<style>) ：
- 这部分定义了组件的 CSS 样式。
- 可以选择使用 scoped 属性来将样式限定在当前组件内，避免与其他组件冲突。
- 支持 CSS 预处理器，如 SCSS、LESS 或 Stylus。

回到主题，一个最基础的main.js文件里，至少需要有这几行代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

导入 createApp：第一行代码从 Vue 核心库中导入了 createApp 函数。createApp 是一个工厂函数，用于创建一个 Vue 应用实例。

导入根组件 App：第二行代码从当前目录下的 App.vue 文件导入根组件。App.vue 文件通常包含了整个应用的最高级别的组件，它会作为整个应用的入口点。

创建并挂载应用：createApp(App) 创建了一个新的 Vue 应用实例，并将 App 组件设置为其根组件。.mount('#app') 将创建的应用实例挂载到 DOM 中指定的选择器所匹配的元素上，在这个例子中是 ID 为 app 的元素。

这里的第二行代码就是组件化开发的关键所在，它支持将.vue后缀的文件引入到该文件中，格式为

import 关键字 from '目标路径'

而且，这关键字在.vue后缀的文件中还可以当作标签使用，并搭配vue中的指令来实现一些需求，这就要提及组件化开发的另一大特点---复用性

复用性

在原生JS中就有这一思想，不，准确来说应该是良好习惯。在原生JS中，我们通常会把一个很多地方都用的着的函数进行封装，这样不仅是降低代码的重复，也是提高了代码的可维护性。

而在vue中的复用性是通过组件化设计来实现的。组件化设计允许你将 UI 分解成可重用的部分，这些部分可以在不同的地方被多次使用，从而提高代码的复用性和可维护性。以下是一些关于 Vue.js 中复用性的关键点：

1. 组件复用

局部注册：在父组件内部注册子组件，使其成为局部可用的组件。这种方式适用于仅在特定父组件中使用的子组件。

const ParentComponent = {
  components: {
    ChildComponent: ChildComponentDefinition
  },
  template: '<child-component></child-component>'
};

全局注册：在 Vue 应用实例中全局注册组件，使其在整个应用中都可以使用。这种方式适用于在整个应用中多处使用的通用组件。
```
Vue.component('global-component', GlobalComponentDefinition);
```

2. 插槽 (Slots)

默认插槽：当需要在组件内部留出位置让用户插入内容时，可以使用默认插槽。
```
<my-component>
  <p>这是一个自定义的内容。</p>
</my-component>
```

具名插槽：允许你在组件中定义多个插槽，并根据名称插入内容。

<my-component>
  <template v-slot:header>
    <h1>头部标题</h1>
  </template>
  <template v-slot:footer>
    <p>页脚信息</p>
  </template>
</my-component>

作用域插槽：允许子组件向父组件传递数据，使得父组件可以根据这些数据生成内容。

<my-component>
  <template v-slot:some-slot="slotProps">
    <p>{{ slotProps.someData }}</p>
  </template>
</my-component>

3. 动态组件

<component> 标签：可以基于表达式动态切换渲染的组件。

<component :is="currentComponent"></component>

data() {
  return {
    currentComponent: 'component-a'
  };
}

4. 组合 API

组合式 API：Vue 3 引入了组合式 API，如 setup() 函数和响应式 API（如 ref, reactive），使得组件的逻辑更加模块化和可复用。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

5. 混合 (Mixins)

混入：虽然在 Vue 3 中不推荐使用混入，但在 Vue 2 中可以使用混入来共享多个组件之间的逻辑。

const myMixin = {
  created() {
    console.log('created');
  }
};

const ComponentA = {
  mixins: [myMixin]
};

6. 组件库

使用第三方组件库：可以利用像 Element UI、Vuetify 等成熟的 UI 组件库来快速构建应用，这些库提供了大量的可复用组件。

7. 自定义指令

自定义指令：可以创建自定义指令来封装一些常见的 DOM 操作，使其可以在多个组件中复用。
```
Vue.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
```

通过上述机制，Vue.js 支持多种方式来促进代码的复用性。这些技术可以帮助你构建模块化的应用，并确保代码的可读性和可维护性。

总结

vue强大的组件化开发其实就可以总结为一句话：vue支持将代码抽离再拿回来使用。

如果这篇文章对你有所帮助，就点个赞再走吧！！！

我是Ace，我们下次分享再见！！！

vue强大的组件化开发思想

首页