Служебные функции в компоненте Vue внутри или снаружи компонента - PullRequest
Новая
       4

Служебные функции в компоненте Vue внутри или снаружи компонента

1 голос
/ 25 сентября 2019

Какой предпочтительный способ регистрации функций в 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>

Аргументы могут быть разными, служебные функции могут быть чистыми ивернуть что-то или изменить аргумент.Там может быть много разных сценариев.Но я надеюсь, что вы поняли суть.

Другой подход заключается в добавлении этих функций в качестве методов к вашему компоненту.Например: 

<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 ;-) И иногда может быть полезно, если используется внутри лямбды.

Я не уверен, если этовопрос мнений, и вы можете предпочесть один подход другому, исходя только из ваших личных предпочтений, или это объективные причины, по которым вам следует предпочесть один другому, например (но не ограничиваясь этим) производительность компонента или принципы разработки программного обеспечения, которыенарушено одним решением.

1 Ответ

1 голос
/ 25 сентября 2019

Разница в том, что вспомогательные функции utilityFunction и utilityFunctionTwo не проверяются.Они не могут быть доступны напрямую.Они не могли быть обмануты, даже если бы они были: 

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

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

Как объяснено здесь , из-за того, как работают модули, можно шпионить или издеваться над функцией, только если она была экспортированаиз модуля и используется в другом модуле.

Чтобы быть полностью тестируемыми или многоразовыми, utilityFunction и utilityFunctionTwo следует переместить в другой модуль.

Поскольку они используются в личных целяхкомпонентом и не используются повторно, разумной альтернативой является сделать их закрытыми методами, это можно обозначить символом подчеркивания: 

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

Недостатком является то, что методы не могут автоматически удаляться как мертвый код в случаеони не используются, но обычные функции могут.

...