javascript - What is the difference between window.app=new Vue({}) instead of const app = new Vue({}) in app.js in Vue js?

Question

So what is the difference if I use window.app in main.js in Vue instead of 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 }
});

instead of

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

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

So the reason I used window.app because I want to call a method from question component using an external jQuery function to execute the Vue method, like App.component.metho() then it works. But is this safe approach?

question from:https://stackoverflow.com/questions/65932493/what-is-the-difference-between-window-app-new-vue-instead-of-const-app-new

Answer 1

every browser have window object inbuilt which can be access from everywhere in client side java script

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

so if you use

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

then your assign a variable App to window object so you can use App to get vue instance in anywhere in your application

and if you use

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

this then you cannot access app variable anywhere in you application