Vue.extend、组件（component）、插件（plugin）和混入（mixin）以及工具函数（utils）的区别

Vue.extend、组件和插件通常用于定义或扩展用户界面组件，
而混入和utils常用于提供可复用的功能或工具方法。

1，Vue.extend 是一个用来创建子类的工厂函数，参数是一个包含组件选项的对象。Vue.extend 创建的是一个组件构造器，而不是直接使用的组件实例。

var MyComponent = Vue.extend({   // 选项... }) 

2，组件（Component）是用于构建界面的基本单元，它可以是一个文本输入框、按钮、图片列表等。

Vue.component('my-component', {   // 选项... }) 

3，插件（Plugin）是一个带有 install 方法的对象，install 方法调用时，会接收 Vue 构造函数作为参数。

MyPlugin.install = function (Vue, options) {   // 添加全局方法或者属性   Vue.myGlobalMethod = function () {     // 逻辑...   } } Vue.use(MyPlugin) 

4，混入（Mixin）是可以包含组件选项的一个对象，混入后，这些选项会被“混入”到组件的选项中。

var myMixin = {   created() {     this.hello()   },   methods: {     hello() {       console.log('hello from mixin!')     }   } }   // 全局注册 Vue.mixin(myMixin)   // 或者在组件中注册使用 // index.vue <script> export default {  mixins: [myMixin],  data() {     return {},  },  methods: {} } </script> 

5，utils 通常是一系列工具函数的集合，用于完成特定的、通用的任务，比如处理URL、数组操作等。

// utils.js export function capitalizeFirstLetter(string) {   return string.charAt(0).toUpperCase() + string.slice(1); }   // 在其他文件中使用 import { capitalizeFirstLetter } from './utils.js'; console.log(capitalizeFirstLetter('hello')); // 输出: Hello