前言

在使用vue框架之后，我们发现原本复杂的JS逻辑变得简单了，但是，在复杂的项目中，一个页面的JS逻辑代码依然可能要写几千行，这就迫使你要给JS逻辑代码做拆分，本着“函数功能单一性”的原则，可能往往要拆出几个或者十几个工具函数。这时候怎么办？

有人说：用mixins，mixins里写methods，把几十个函数写进去。

听起来是不错，也有一定可行性，但是，通常我们认为methods是给用户事件和生命周期准备的，如果该组件的用户事件有2个，生命周期比如created又占用了1个，那么我们通常希望看到3个methods，但是你的做法是出现了几十个methods，这也是对methods的滥用。

又有人说：可以把数据放到vuex中。

这个不多说，属于对vuex的滥用，methods是清爽了，vuex的mutations又爆炸了。

最后有人说：那就老老实实写工具函数，然后import。

听起来也不错，也有很高可行性，但是，如果工具函数要操作组件data，应该怎么写呢？工具函数中的this指向的可不是调用它的组件。怎么办？今天聊聊这个话题。

第一种方法，data传参

我的工具函数如下：

function utilsA(a) {
  return a + a;
}

export default utilsA;

组件中：

import utilsA from '@/utils/utilsA';

methods: {
    foo() {
      this.a = utilsA(this.a);
      // ...
    },
}

这种方式的优点：

• 显式传参，一目了然。

这种方式的缺点：

• 你要去关心要传什么参数。

• 工具函数修改data不一定成功，因为我们知道，参数是基础类型的话，是传值，是引用类型的话，是传引用。所以，参数是基础类型的话，无法在工具函数中修改data本体，必须有返回值，返回到组件中再修改data；如果参数是引用类型的话，倒是可以修改data本体。

第二种方法，.bind(this)

我的工具函数如下：

function utilsA() {
  this.a = this.a + this.a;
}

export default utilsA;

组件中：

import utilsA from '@/utils/utilsA';

methods: {
    foo() {
      utilsA.bind(this)();
      console.log(this.a);
      // ...
    },
}

优点：

• 无需参数传递，无需考虑传值和传引用的问题。

• 无脑.bind(this)即可，在工具函数中可以操作组件实例的任何数据，也可以调用组件实例的任意方法。

• 工具函数中可以直接操作基本类型的data。

• this只是一个指针，绑定this的效率很高。

缺点：

• 基本无缺点，只是不要忘了写.bind(this)。