likes
comments
collection
share

vue中 实现公共函数的共享（混入，原型），mixins和Vue.prototype其区别以及优缺点

作者站长头像
站长
· 阅读数 64

使用Vue.prototype

  1. 使用全局变量/方法：可以将公共函数定义为全局变量或全局方法，并在需要调用的组件中直接使用。这可以通过在Vue实例中添加methods或computed属性来实现。
  • main.js（或类似的入口文件）
  • 或者在utils.js中，然后在入口文件引入（代码优雅性）
Vue.prototype.$myFunction = function() {
  // 公共函数逻辑
};
  • 然后在组件中使用该函数：
 export default {
      methods: {
        callMyFunction() {
          this.$myFunction(); // 调用全局函数
        }
      }
};

在这里，请注意！！！全局变量和方法可能会增加命名冲突和代码维护的复杂性，因此请谨慎使用。

使用单独模块common，需单独引用该模块

  1. 创建一个单独的模块：可以创建一个单独的模块，专门用于存放公共函数，并在需要调用的组件中导入并使用该模块。
export function myFunction() {
  // 公共函数逻辑
}
  1. 在所用到的组件中导入并使用该函数：
    import { myFunction } from './common';

    export default {
      methods: {
        callMyFunction() {
          myFunction(); // 调用导入的函数
        }
      }
    };

这种方式将公共函数封装在一个独立的模块中，提供了更好的可维护性和代码组织性。

vue中 实现公共函数的共享（混入，原型），mixins和Vue.prototype其区别以及优缺点

使用mixins方式来实现公共函数的共享

Vue中使用mixins方式来实现公共函数的共享，可以按照以下步骤：

1、创建一个包含公共函数的mixin对象：

export default {
  methods: {
    myFunction() {
      // 公共函数逻辑
    }
  }
};

2、在需要使用这些公共函数的组件中导入并混入（mixin）该mixin对象：

import myMixin from './myMixin';

export default {
  mixins: [myMixin],
  // 组件其他配置和逻辑
};

在混入了myMixin的组件中，就可以直接使用myFunction()方法了。

优缺点

Vue.prototype.$myFunction 和使用mixins方式都可以实现在多个组件中共享公共函数，但它们有不同的优缺点：

Vue.prototype.$myFunction 的优点：

  1. 全局可用：通过将函数绑定到Vue实例的原型上，可以在整个应用程序中的任何组件中使用，无需显式导入或混入。
  2. 简单易用：只需定义一次函数，并在需要时直接使用this.$myFunction()调用。

Vue.prototype.$myFunction 的缺点：

  1. 命名空间污染：将函数添加到Vue的原型上可能会引起命名冲突，特别是在大型应用程序中。如果多个函数具有相同的名称，可能会导致意外覆盖或错误的行为。
  2. 难以追踪：由于全局可用，很难追踪和定位到函数在应用程序中的具体使用情况。

使用mixins方式的优点：

  • 显式导入：通过明确导入和混入指定的mixin对象，可以清晰地知道哪些函数被引入到组件中。
  • 组合性：可以同时混入多个mixin对象，从而实现不同功能的复用和组合。
  • 避免命名冲突：每个mixin对象都是独立的，避免了命名冲突的问题。

Mixins 的缺点：

  • 命名冲突：如果多个mixins具有相同的方法或属性名称，可能会导致命名冲突和覆盖问题。
  • 隐式依赖关系：使用mixins会引入一种隐式的依赖关系，组件的行为会受到mixins中的方法和属性的影响。这可能增加代码的复杂性和维护成本。

使用mixins方式的注意事项：

  • 当某个组件需要覆盖或修改mixin中的某个方法时，可以在组件中重新定义该方法。

总结

综上所述，

使用mixins方式可以在Vue中实现公共函数的共享。通过将公共函数定义在mixin对象中，并在需要使用的组件中混入(mixin)该mixin对象，可以方便地在组件中使用这些公共函数，并提供了一种灵活和可组合的代码复用方式。

Vue.prototype.$myFunction 提供了全局可用性和简单易用性，但可能导致命名冲突和难以追踪函数使用情况。Mixins 提供了显式导入和组合性的优点，但可能存在命名冲突和隐式依赖关系的问题。选择适合你的具体场景和需求的方式是很重要的。

写在最后

以上便是本次分享的全部内容，希望对你有所帮助^_^

到这里业务需求基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路 谢谢支持

转载自:https://juejin.cn/post/7283311024979165241
评论
请登录