Vue 'export default' vs 'new Vue'

vue.js vue-component vue-cli
rockzombie2 picture rockzombie2 · Feb 11, 2018 · Viewed 100.2k times · Source

I just installed Vue and have been following some tutorials to create a project using the vue-cli webpack template. When it creates the component, I notice it binds our data inside of the following:

export default {
    name: 'app',
    data: []
}

Whereas in other tutorials I see data being bound from:

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

What is the difference, and why does it seem like the syntax between the two is different? I'm having trouble getting the 'new Vue' code to work from inside the tag I'm using from the App.vue generated by the vue-cli.

Answer

user320487 picture user320487 · Feb 11, 2018

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.

Related questions

Is there any easy way to create new components in the Vue-cli?

I can't find any easy way to create new components with the Vue-cli. I came from Angular and there I could just type ng g c "component name" and it would make the job. Does anyone know about easy way …

Read More
Vue.js - How to properly watch for nested data

I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component …

Read More
How to listen for 'props' changes

In the VueJs 2.0 docs I can't find any hooks that would listen on props changes. Does VueJs have such hooks like onPropsUpdated() or similar? Update As @wostex suggested, I tried to watch my property but nothing changed. Then I realized …

Read More