Vue 'export default' vs 'new Vue'

后端未结

关注

 4  388

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 ins

相关标签:

4条回答

予麋鹿

2021-01-29 18:46
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-01-29 18:47

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
借酒劲吻你

2021-01-29 19:01
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
不要未来只要你来

2021-01-29 19:06

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

0 讨论(0)
发布评论:

提交评论
- 加载中...