Vue3与Ue通信 - 技术栈

起因各位掘友好，我是前端小白，最近新项目开发过程中需要和Ue端进行交互，但是我之前没有接触过这方面的项目，前辈走的时候也没有留下文档，我们的ue同学也是一知半解，在开发工程中遇到了个玛法，就是在交互过程中，前端调用Ue的函数可以正常调用，但是Ue调用我前端本地的方法无法调用成功，我参考之前的项目，但是之前的项目是Vue2的项目，调用方式Vue3有一点点不同，就是this的指向问题。

一、Vue2中Ue与前端通信

Ue与前端通信需要通过script标签导入插件，导入这个插件之后，就可以进行通信了

js 复制代码

  <script>
    // create the global ue5(...) helper function 加这个和下面的src
    "object" != typeof ue && (ue = {}), uuidv4 = function () { return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, function (t) { return (t ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> t / 4).toString(16) }) }, ue5 = function (r) { return "object" != typeof ue.interface || "function" != typeof ue.interface.broadcast ? (ue.interface = {}, function (t, e, n, o) { var u, i; "string" == typeof t && ("function" == typeof e && (o = n, n = e, e = null), u = [t, "", r(n, o)], void 0 !== e && (u[1] = e), i = encodeURIComponent(JSON.stringify(u)), "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "", "#" + i), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location.hash = i, document.location.hash = encodeURIComponent("[]"))) }) : (i = ue.interface, ue.interface = {}, function (t, e, n, o) { var u; "string" == typeof t && ("function" == typeof e && (o = n, n = e, e = null), u = r(n, o), void 0 !== e ? i.broadcast(t, JSON.stringify(e), u) : i.broadcast(t, "", u)) }); var i }(function (t, e) { if ("function" != typeof t) return ""; var n = uuidv4(); return ue.interface[n] = t, setTimeout(function () { delete ue.interface[n] }, 1e3 * Math.max(1, parseInt(e) || 0)), n });
 </script>

前端调用Ue的方法比较简单，以函数getData为例,通过ue5()调用

js 复制代码

/**
*第一个参数是ue端的函数名
*第二个参数是可能用的参数，比如id
*/
ue5('getData',{id:1})

Ue端调用前端的方法与这个方式不太一样，但是也比较简单

js 复制代码

/**
*最好两端的函数名称定义成一致的，方便查找定位
*ue端也可以进行函数传参
*前端可以直接接收参数，和正常的函数传参一致
*比如ue端传的也是id
*/
ue.interface.getData = this.getData;
getData(data){
const {id}=data
}

二、Vue3与Ue端的通信

vue3与vue2有些许不同，就是在ue调用前端的方法上。前端调用ue方法和vue2一致，所以不再赘述 ue调用前端方法的时候就出现了问题，再网上找了一些资料，但是对这种项目描述的比较少，最后找了万能的群友，群友给了方案，就是把ue方法挂载到window上。

js 复制代码

  window.ue.interface.getData = () => {
      getData();
    };

三、总结

虽然问题被解决了，但是还是很想知道一下原因，所以总结了一些资料，跟各位掘友分析一下，探讨一下。

Vue 2 的自动挂载行为

在 Vue 2 中，Vue 实例本身及其方法和属性会自动暴露到全局 window 对象上。这样，在 Vue 2 中，就不需要手动将实例挂载到 window，因为 Vue 已经做了这件事。所以，当我在 UE5 中通过 WebView 调用 Vue 2 的方法时，它可以直接访问这些全局方法。例如，Vue 2 会将 <math xmlns="http://www.w3.org/1998/Math/MathML"> d a t a 、 data、 </math>data、refs、$emit 等实例属性和方法暴露到全局，因此我们可以在任意地方使用它们。这样，UE5 在调用 Vue 时，就无需显式挂载方法到 window，它会自动找到这些方法。

Vue 3 的全局 API 改变

Vue 3 对全局 API 进行了重构，尤其是 Composition API 的引入，使得 Vue 3 更加模块化。与 Vue 2 不同，Vue 3 不再自动将实例和其方法挂载到 window 上。因此，在 Vue 3 中，必须显式地将实例或方法挂载到 window 或其他全局对象上，以便让 UE5 或其他外部环境可以访问。

在 Vue 3 中，我们必须显式地将需要的属性或方法挂载到 window 或使用 app.config.globalProperties 来共享这些方法。如果你没有显式挂载，UE5 将无法直接访问 Vue 3 实例中的方法。

Vue 3 中暴露方法

window.myCustomMethod = function() { console.log("UE5 调用了前端方法！"); };

Vue 2 会自动将实例和方法挂载到全局 window 对象上，因此你不需要显式挂载，UE5 可以直接访问。

Vue 3 采用了更加模块化的设计，避免了全局污染，因此你需要显式将实例或方法挂载到 window 或使用 globalProperties 来访问。

##四、最后

写这篇的目的希望各位掘友，遇到这样的问题的时候有个参考，提供一个思路，也希望各位也能在评论区留下解决办法，方便其他朋友。最后祝各位码运昌隆，早日暴富。