Vue中的组件与插件

什么是组件

组件是用于实现局部（特定）功能效果的代码集合。这些代码集合包括HTML、CSS、JavaScript等。组件是可复用的Vue实例，可以把一些公共的模块抽取出来，然后写成单独的工具组件或页面，在需要的页面中直接引入即可，从而提高了代码的复用率。

组件的优势

• 降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现
• 调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题，之所以能够快速定位，是因为每个组件之间低耦合，职责单一，所以逻辑会比分析整个系统要简单
• 提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

什么是插件

简单来说，就是一些额外的小工具或功能模块，它们可以帮助我们更好地完成网页开发或增强网页的功能。在前端开发中，这些插件通常是一些已经写好的代码，我们只需要把它们加入到我们的项目中，就可以直接使用它们提供的功能，而不需要自己从头开始写代码。这样可以大大节省我们的开发时间，让开发变得更加高效。

一般有以下几种：

• 添加全局方法或者属性。如: vue-custom-element

• 添加全局资源：指令/过滤器/过渡等。如 vue-touch
• 通过全局混入来添加一些组件选项。如vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如vue-router

两者区别

编写形式

1.基于模板的组件：
这是 Vue 中最基础的组件编写方式，通过 HTML 模板来定义组件的结构，使用 JavaScript 来定义组件的行为。组件的选项对象通常包含 template、data、methods、computed、watch 等属性。

Vue.component('my-component', {  
  template: '<div>{{ message }}</div>',  
  data: function () {  
    return {  
      message: 'Hello from my component!'  
    }  
  }  
});

2.单文件组件：
单文件组件是 Vue 的一个特色，它允许我们将组件的模板、JavaScript 逻辑和样式放在同一个 .vue 文件中。这种组织方式使得组件更加模块化，易于维护。

<template>  
  <div class="my-component">{{ message }}</div>  
</template>  
 
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello from my single-file component!'  
    };  
  }  
};  
</script>  
 
<style scoped>  
.my-component {  
  color: red;  
}  
</style>

3.使用 JSX 或 TypeScript：
虽然 Vue 的官方推荐是使用模板语法来编写组件，但你也可以选择使用 JSX 或 TypeScript 来编写组件。JSX 允许你在 JavaScript 中编写类似于 HTML 的结构，而 TypeScript 则提供了类型检查和更强大的 IDE 支持。使用 JSX 的例子：

export default {  
  data() {  
    return {  
      message: 'Hello from JSX!'  
    };  
  },  
  render(h) {  
    return h('div', this.message);  
  }  
};

使用 TypeScript 的例子（通常结合单文件组件）：

<template>  
  <div>{{ message }}</div>  
</template>  
 
<script lang="ts">  
import { Vue, Component, Prop } from 'vue-property-decorator';  
 
@Component  
export default class MyComponent extends Vue {  
  @Prop(String) private msg!: string;  
 
  get message(): string {  
    return this.msg || 'Hello from TypeScript!';  
  }  
}  
</script>

4.函数式组件：
函数式组件是无状态、无实例的组件，它们没有响应式数据或实例方法。函数式组件只根据它们的 props 进行渲染。它们非常适合用于那些只依赖于外部 props 的简单组件。

Vue.component('functional-button', {  
  functional: true,  
  props: ['color'],  
  render(h, { props, slots }) {  
    return h('button', { style: { color: props.color } }, slots.default);  
  }  
});

5.组合式 API：
从 Vue 3 开始，引入了组合式 API，它允许你使用更加函数式的方式组织组件的逻辑。通过 setup 函数，你可以使用 ref、reactive、computed、watch 等函数来管理组件的状态和行为。

<template>  
  <div>{{ count }}</div>  
  <button @click="increment">Increment</button>  
</template>  
 
<script>  
import { ref } from 'vue';  
 
export default {  
  setup() {  
    const count = ref(0);  
    const increment = () => {  
      count.value++;  
    };  
    return {  
      count,  
      increment  
    };  
  }  
};  
</script>

这些编写组件的形式并不是相互独立的，它们可以混合使用，以根据项目的具体需求和团队的偏好来组织组件的代码。

6.插件的编写形式

编写Vue插件的形式通常涉及定义一个对象，该对象包含一系列用于增强Vue实例功能的钩子函数和/或属性。Vue插件的主要作用是提供全局级别的功能增强，比如添加全局方法或属性、混入全局逻辑、添加自定义指令、注册或获取组件等。

下面是一个简单的Vue插件编写的示例：

// 定义一个Vue插件对象  
const MyPlugin = {  
  // 安装函数，当插件被安装时会被调用  
  install(Vue, options) {  
    // 1. 添加全局方法或属性  
    Vue.prototype.$myMethod = function (methodOptions) {  
      // 插件的具体逻辑  
    }  
  
    // 2. 添加全局资源  
    Vue.directive('my-directive', {  
      bind(el, binding, vnode, oldVnode) {  
        // 指令的具体逻辑  
      },  
      // ...其他指令钩子...  
    });  
  
    // 3. 混入全局逻辑  
    Vue.mixin({  
      created: function () {  
        // 混入的具体逻辑  
      }  
      // ...其他选项...  
    });  
  
    // 4. 添加实例方法  
    Vue.prototype.$myProperty = 'hello from plugin';  
  
    // 使用提供的options参数（如果有的话）  
    if (options.someOption) {  
      // 根据options进行额外的插件配置或操作  
    }  
  }  
};  
  
// 使用Vue.use()安装插件  
Vue.use(MyPlugin, { someOption: true });

在上面的示例中，MyPlugin 是一个对象，它有一个 install 方法。当使用 Vue.use(MyPlugin) 时，Vue 会调用这个 install 方法，并传入 Vue 构造函数以及一个可选的选项对象。

在 install 方法内部，你可以执行各种操作来扩展 Vue 的功能。你可以添加全局方法到 Vue.prototype 上，这样它们就可以在任何 Vue 实例中通过 this.$myMethod 访问。你也可以添加全局自定义指令，通过 Vue.directive。混入 (Vue.mixin) 可以让你在组件的生命周期钩子前/后注入逻辑。

注册形式

1.组件注册——全局注册

如果你在一个地方（通常是你的主入口文件，比如 main.js 或 app.js）导入一个组件，并使用 Vue.component 来全局注册它，那么这个组件就可以在任意 Vue 实例的模板中使用。

import Vue from 'vue';  
import MyComponent from './MyComponent.vue';  
 
Vue.component('my-component', MyComponent);  
 
// 现在 'my-component' 可以在任何 Vue 实例的模板中使用，并匹配为MyCompnent的样式

2.组件注册——局部注册

如果你在一个 Vue 组件内部使用 import 来导入另一个组件，并在该组件的 components 选项中注册它，那么这就是局部注册。局部注册的组件只能在这个父组件的模板中使用。

import MyComponent from './MyComponent.vue';  
 
export default {  
  components: {  
    MyComponent  
  },  
  // ... 其他选项 ...  
};

3.插件注册

// 使用Vue.use()安装插件

注意：注册插件的时候，需要在调用 new Vue() 启动应用之前完成，Vue.use会自动阻止多次注册相同插件，只会注册一次。

Vue.use(MyPlugin, { someOption: true });

使用场景

组件 (Component) 是用来构成你的 App 的业务模块，它的目标是 App.vue

插件 (Plugin) 是用来增强你的技术栈的功能模块，它的目标是 Vue 本身

简单来说，插件就是指对Vue的功能的增强或补充