Vue js 中 app.js 中的 window.app=new Vue({}) 而不是 const app = new Vue({}) 有什么区别？答案

【问题标题】：What is the difference between window.app=new Vue({}) instead of const app = new Vue({}) in app.js in Vue js?Vue js 中 app.js 中的 window.app=new Vue({}) 而不是 const app = new Vue({}) 有什么区别？
【发布时间】：2021-05-02 01:48:42
【问题描述】：

那么如果我在 Vue 的 main.js 中使用 window.app 而不是 const app 有什么区别呢？

import question from './components/Questions.vue';

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
window.App = new Vue({
    el: '#app',
    components: { question }
});

而不是

import question from './components/Questions.vue';

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
const app = new Vue({
    el: '#app',
    components: { question }
});

所以我之所以使用 window.app 是因为我想使用外部 jQuery 函数从问题组件中调用一个方法来执行 Vue 方法，例如 App.component.metho() 然后它可以工作。但这种方法安全吗？

【问题讨论】：

我真的不明白你为什么要混合 vue 和 jQuery，Vue 可以做 jQuery 可以做的所有事情，等等。不同之处在于变量范围。当您使用 widow.app 时，它将在任何有窗口可用的地方都可用
@Gert B. 我将 laravel 与 vue 一起使用，因此下面调用 vue 组件的刀片是我调用 vue 方法的 jquery 函数。有没有在 vue 组件之外调用 vue 方法的最佳方法？
取决于方法的作用。从 vue 应用程序外部调用 vue 方法对我来说似乎很奇怪..
尽可能坚持使用const app = ...。那会是更好的选择。

标签： javascript laravel vue.js

【解决方案1】：

每个浏览器都内置了 window 对象，可以从客户端 java 脚本中的任何地方访问

https://developer.mozilla.org/en-US/docs/Web/API/Window

所以如果你使用

window.App = new Vue({
    el: '#app',
    components: { question }
});

然后您将变量 App 分配给 window 对象，以便您可以使用 App 在应用程序的任何位置获取 vue 实例

如果你使用

const app = new Vue({
    el: '#app',
    components: { question }
});

这样你就不能在你的应用程序的任何地方访问app 变量

【讨论】：

使用它安全吗？
@Sensuz 是的，可以安全使用。