关于使用Vue时export default 和 new Vue() 写法的区别

关于使用Vue时export default 和 new Vue() 写法的区别

首先，export default 和 new Vue() 是 Vue.js 中两种不同的组件创建方式，它们的使用场景和方式有所不同。

1. export default：这种方式通常在 Vue 单文件组件（.vue 文件）中使用。它允许你定义一个可以被其他组件复用的组件。例如，你可能有一个名为 MyComponent.vue 的文件，其中包含如下代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

然后在另一个组件中，你可以通过 import MyComponent from ‘./MyComponent.vue’ 来引入并使用这个组件。

2. new Vue()：这种方式通常在直接在 HTML 文件中使用 Vue.js 时使用，或者在 JavaScript 文件中创建一个 Vue 实例。例如，你可能有一个 HTML 文件，其中包含如下代码：

<div id="app">
  {{ message }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

在这个例子中，new Vue() 创建了一个新的 Vue 实例，并将其挂载到 id 为 ‘app’ 的 div 元素上。

总的来说，export default 更适合于构建大型应用或需要复用组件的场景，而 new Vue() 更适合于构建小型应用或简单页面。