vue.js - Vue 'export default' vs 'new Vue'

ID : 20031

viewed : 28

Tags : vue.jsvue-componentvue-clivue.js

Top 5 Answer for vue.js - Vue 'export default' vs 'new Vue'

vote vote

92

When you declare:

new Vue({     el: '#app',     data () {       return {}     } )} 

That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example:

<html>   ...   <body>     <div id="app"></div>   </body> </html> 

The other syntax is declaring a component which can be registered and reused later. For example, if you create a single file component like:

// my-component.js export default {     name: 'my-component',     data () {       return {}     } } 

You can later import this and use it like:

// another-component.js <template>   <my-component></my-component> </template> <script>   import myComponent from 'my-component'   export default {     components: {       myComponent     }     data () {       return {}     }     ...   } </script> 

Also, be sure to declare your data properties as functions, otherwise they are not going to be reactive.

vote vote

88

export default is used to create local registration for Vue component.

Here is a great article that explain more about components https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

vote vote

77

The first case (export default {...}) is ES2015 syntax for making some object definition available for use.

The second case (new Vue (...)) is standard syntax for instantiating an object that has been defined.

The first will be used in JS to bootstrap Vue, while either can be used to build up components and templates.

See https://vuejs.org/v2/guide/components-registration.html for more details.

vote vote

61

Whenever you use

export someobject 

and someobject is

{  "prop1":"Property1",  "prop2":"Property2", } 

the above you can import anywhere using import or module.js and there you can use someobject. This is not a restriction that someobject will be an object only it can be a function too, a class or an object.

When you say

new Object() 

like you said

new Vue({   el: '#app',   data: [] )} 

Here you are initiating an object of class Vue.

I hope my answer explains your query in general and more explicitly.

vote vote

60

An Ad-Hoc Query is a query that cannot be determined prior to the moment the query is issued. It is created in order to get information when need arises and it consists of dynamically constructed SQL which is usually constructed by desktop-resident query tools. An ad hoc query does not reside in the computer or the database manager but is dynamically created depending on the needs of the data user.

In SQL, an ad hoc query is a loosely typed command/query whose value depends upon some variable. Each time the command is executed, the result is different, depending on the value of the variable. It cannot be predetermined and usually comes under dynamic programming SQL query. An ad hoc query is short lived and is created at runtime.

Top 3 video Explaining vue.js - Vue 'export default' vs 'new Vue'

Related QUESTION?