javascript - Vue 组件内部或外部组件中的实用程序函数

Question

在 Vue 组件中注册函数的首选方式是什么。 我倾向于在组件中只注册 View 所需的方法(或需要直接组件数据访问)和 vue 组件外部 View 不需要的其他功能。 假设 utilityFunction() 和 utilityFunctionTwo() 当前仅在该组件内部使用。

这是一个例子:

<template>
    <button @click="bar"></button>
    <button @click="foo"></button>
    <button @click="baz"></button>
</template>

<script>
  export default {
      name: "SampleComponent",
      data() {
          return {
              someVariable: "ABC",
              otherVariable: 123
          }
      },
      methods: {
          foo() {
              //some logic
              utilityFunction(this.someVariable);
              //other logic
          },
          bar() {
              //some logic
              utilityFunction(this.someVariable);
              utilityFunctionTwo(this.otherVariable);
              //some other logic
          },
          baz() {
              //some logic
              utilityFunctionTwo(this.someVariable);
              //some other logic
          }
      }
  }
  function utilityFunction(arg){
      //do something
  }
  function utilityFunctionTwo(arg){
      //do something
  }
</script>

参数可能不同，效用函数可以是纯函数并返回一些东西或改变参数。可以有很多不同的场景。但我希望你明白了。

另一种方法是将这些函数作为方法添加到您的组件中。 像这样:

<template>
    <button @click="bar"></button>
    <button @click="foo"></button>
    <button @click="baz"></button>
</template>

<script>
    export default {
        name: "SampleComponent",
        data() {
            return {
                someVariable: "ABC",
                otherVariable: 123
            }
        },
        methods: {
            foo() {
                //some logic
                this.utilityFunction();
                //other logic
            },
            bar() {
                //some logic
                this.utilityFunction();
                this.utilityFunctionTwo(this.otherVariable);
                //some other logic
            },
            baz() {
                //some logic
                this.utilityFunctionTwo(this.someVariable);
                //some other logic
            },
            utilityFunction() {
                //do something
                console.log(this.someVariable)
                //other stuff
            },
            utilityFunctionTwo(arg) {
                //do something
            }
        }
    }
</script>

在这种方法中，您有时不需要将参数传递给方法，因为它可以访问组件 data 对象。

由于以下原因，我更喜欢第一种方法:

1. 我有模板使用的或组件(出于某种原因)需要的方法的简短列表。如果所有方法都放在那里，有时这个列表会变得很长。
2. 如果将来该功能可以在其他地方使用，我将能够轻松地将它添加到一些 .js 文件中，并将其导入其他组件。
3. 函数在不需要时无权访问组件范围
4. 它使我免于输入 this 关键字 ;-) 如果在 lambda 中使用，有时可能会有用。

我不确定这是否是一个意见问题，您可以纯粹根据个人喜好选择一种方法而不是另一种方法，或者它们是否有任何客观原因让您更喜欢一种方法，例如(但不限于)一种解决方案破坏了组件的性能或软件设计原则。

Answer 1

区别在于 utilityFunction 和 utilityFunctionTwo 辅助函数是不可测试的。不能直接访问它们。他们不能被 mock ，即使他们是:

  export function utilityFunction(arg){
      //do something
  }

  export function utilityFunctionTwo(arg){
      //do something
  }

如解释here ，由于模块的工作方式，只有当函数从一个模块导出并在另一个模块中使用时，才有可能监视或模拟函数。

为了完全可测试或可重用，utilityFunction 和 utilityFunctionTwo 应该移动到另一个模块。

由于它们被组件私有(private)使用并且不会被重用，一个合理的替代方法是将它们设为私有(private)方法，这可以用下划线表示法指定:

    methods: {
        ...
        _utilityFunction() {
            //do something
        },
        _utilityFunctionTwo(arg) {
            //do something
        }
    }

缺点是方法不能作为死代码自动删除，以防它们不被使用，但常规函数可以。