Question

在Vue Component中注册功能的首选方式是什么。我倾向于在仅组件中注册视图所需的方法（或要求直接组件数据访问）以及视图外部vue组件不需要的其他功能。假设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>

参数可能不同，实用程序函数可以是纯函数，并且可以返回某些值或对参数进行mutate。可能有很多不同的方案。但我希望你明白这一点。

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

<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>

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

由于某些原因，我稍微喜欢第一种方法：

我有模板使用或组件所需的方法的简短列表（出于某种原因）。如果所有方法都放在该列表中，有时此列表可能会很长。
如果该功能将来可以在其他地方使用，我将能够轻松地将其添加到某些.js文件中，并将其导入其他组件中。
如果不需要，则无法访问组件范围
它使我不必输入this关键字；-)有时在lambda中使用可能会很有用。

我不确定这是否是一种见解，您纯粹是根据个人喜好选择一个方法而不是另一个方法，或者是出于客观原因，您应该优先选择另一个方法，例如（但不限于）一种解决方案破坏了组件的性能或软件设计的原理。

Answer 1

区别在于utilityFunction和utilityFunctionTwo辅助函数不可测试。无法直接访问它们。即使被嘲笑，他们也不能被嘲笑：

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

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

如here所述，由于模块的工作方式，只有从某个模块导出并在另一个模块中使用该功能时，才有可能监视或模拟该功能。

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

由于它们是由组件私下使用并且不会被重用，因此合理的替代方法是将它们设置为私有方法，可以用下划线表示：

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

不利之处在于，如果不使用方法，则不能将它们作为死代码自动删除，但是常规函数可以删除。

Vue组件内部或外部组件中的实用程序功能

1 个答案: