jQuery function vs Vue JS - для разработки UI-компонентов

Question

Например, SweetAlert2 [1]

Его можно использовать с однострочным

Swal.fire('Any fool can use a computer')

Однако существует также оболочка Vue JS [2], его можно вызвать как

<template>
  <button @click="showAlert">Hello world</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      // Use sweetalert2
      this.$swal('Hello Vue world!!!');
    },
  },
};
</script>

Но почему? каковы преимущества использования последнего Vue подхода для замены однострочника?

[1] https://sweetalert2.github.io/

[2] https://github.com/avil13/vue-sweetalert2

Answer 1

На самом деле именно этот вопрос обсуждается в выпуске репозитория vue -sweetalert2 .

Некоторые люди предпочитают использовать оболочку Vue вокруг библиотек, чтобы используя их больше 'vue -like'.

Иногда такие оболочки добавляют пользовательские компоненты, чтобы разрешить их декларативное использование, что может сделать их достойными рассмотрения, но вы всегда должны учитывать, что вы добавляете дополнительная зависимость, которая может обновляться не так часто, как библиотека, которую она обертывает.

В этом конкретном случае вы действительно ничего не получаете от использования оболочки, и (как упоминалось в комментариях к проблеме) вы ' Было бы лучше сделать зависимость от sweetalert более явной с помощью оператора импорта:

<template>
    <button v-on:click="showAlert">Hello world</button>
</template>

<script>
import swal from 'sweetalert2'
export default {
    data() {
        return {};
    },
    methods: {
        showAlert(){
            // Use sweetalret2
            swal('Hello Vue world!!!');
        }
    }
}
</script>