Javascript 有没有一种好方法可以将基于JQuery的小部件包装成一个可以在Vue.js中轻松使用的模块？

我的一些同事已经开始使用Vue.js开发一个相当复杂的web应用程序。他们希望能够使用我在过去使用JQuery从头制作的一些小部件，因为重新实现它们需要大量的工作/时间

我知道，如果你小心的话，可以安全地将JQuery与Vue.js一起使用，但是我找到的信息似乎只局限于相当模糊的博客文章，我的同事们通知我，他们正在努力想办法做到这一点。因此，我正在考虑是否可以找到一种方法，将我的小部件很好地包装到一个可移植的跨框架库中（对于可以在Vue.js中使用的初学者）。例如，类似于人们如何创建提供跨语言API的绑定。理想情况下，它应该使人们能够非常容易地将其与Vue.js一起使用，并且应该消除潜在陷阱的危险。这样做有什么问题吗？有没有可以利用的现有工作，或者人们这样做的惯用方式

---

对于添加的上下文，当前小部件有一个接口，该接口包括一个构造函数（在其中传递它将被附加到的父DOM元素的id）、一个配置函数，并且当它发生变化时，它还会发出几个信号/事件（尽管这些信号/事件可以由定期检查其状态的函数替换）.

就创建一个可移植的跨框架库而言，我认为jQuery只是一个依赖项，它允许您创建某些元素并执行某些任务，您可以根据目标框架的要求截取和/或修改这些元素。因此，您实际上是在围绕它创建一个包装器组件，因为目前排名前三位的JavaScript框架（React、Vue、Angular）都是基于组件的

关键区别之一（简单地说）是：反应系统与DOM操纵

现在，谈到将jQuery插件移植到Vue——我不是这两个库的专家，但我自己来自jQuery，我想说，这可能很容易，只要在Vue组件内部

数据
和/或
道具
上保留对小部件/插件实例的引用，并让它选择性地公开相应的方法即可。方法公开部分为可选部分的原因与另一个Vue中的一个库更通用的原因相同，因为它可以在库和框架之间进行缩放

在jQuery中，您将创建一个对象的实例，并将其传递给公共方法使用；而在Vue中，除了根实例之外，您不会显式创建实例（您，但通常不必创建），因为组件本身就是（内部构造的）实例。组件有责任维护其状态和数据；兄弟和/或父组件通常没有直接访问它们的权限

Vue和jQuery的相似之处在于它们都支持状态/数据同步。使用jQuery，很明显，因为所有引用都在全局范围内；对于Vue，可以使用或修饰符（替换为Vue 3中
v-model
上的参数）。此外，它们还使用略微不同的方法订阅事件

让我们使用jQuery并向其添加一些Vue支持。我们将重点讨论3件事（选项、事件和方法），并以它们各自的3项为例进行比较。我不能涵盖这里的所有内容，但这应该给你一些基本的想法

设置：jQuery
为了遵守您的相关规范，让我们假设此小部件/插件是
窗口
范围内的
新的
-able类

在jQuery中，您可以在关闭
标记之前在
文档
中编写以下内容：

var autocomplete=新的自动完成({
资料来源：[
“vue”，
“反应”，
"棱角",，
“jquery”
],
附件：“#自动完成容器”，
残疾人士:错,，
更改：函数（事件，ui）{}，
焦点：函数（事件，ui）{}，
选择：函数（事件，ui）{}
});
//然后是在这个实例上需要手动触发器的其他地方
autocomplete.close（）；
var isDisabled=autocomplete.option（'disabled'）；
自动完成。搜索（'ue'）；//匹配“vue”和“jquery”；）

在父范围中的某个位置预定义或动态创建目标元素时：



移植到Vue
由于您没有提到正在使用的Vue的任何特定版本，我将假设使用ES模块的宏（最新稳定版本：2.6.12，ATTOW）；否则，请尝试ES模块

对于Vue中的这个特定用例，我们想在钩子中实例化这个插件，因为这是我们创建目标元素的地方，可以在上面进行构建。了解有关图表中的生命周期挂钩的更多信息

正在创建组件：
Autocomplete.vue

导出默认值{
//基本上，这就是定义不可变的“选项”的地方。
道具：{
资料来源：{
类型：数组，
默认值：（）=>[]
},
残疾人士：{
类型：布尔型，
默认值：false
}
},
//这是准备和/或指定组件内部选项的地方。
数据：（）=>({
实例：null
}),
安装的（）{
//此处的`this`指的是本地Vue实例
this.instance=新的自动完成({
资料来源：这个，
disabled:this.disabled，
appendTo:this.$el//引用模板上的'input'元素，
更改：（事件，用户界面）=>{
//您可以选择在第二个参数中传递任何内容
this.$emit（'change'，this.instance）；
},
焦点：（事件、用户界面）=>{
this.$emit（'focus'，this.instance，event）；