jQuery函数vs Vue JS -用于UI组件开发

Question

例如，SweetAlert2 1

它可以与一行程序一起使用

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

但是，还有一个Vue JS2包装器，可以像这样调用它

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

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

但是为什么呢？使用后一种Vue方法替代一行程序有什么好处？

1

2

Answer 1

实际上，在issue on the vue-sweetalert2 repo中就有关于这个问题的讨论。

有些人更喜欢在库周围使用Vue包装器，以便使它们的使用更像vue。

有时，这样的包装器会添加自定义组件，以允许以声明方式使用它们，这会使它们值得考虑，但您必须始终考虑添加额外的依赖项，该依赖项的更新频率可能不如包装的库那么频繁。

在这种情况下，使用包装器并不能获得任何好处，而且(如问题注释中所述)最好使用import语句更明确地说明对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>