计算属性computed

使用 export default 的写法（Vue 单文件组件）和 使用 new Vue() 的写法（实例化 Vue）二者之间的区别：

1. 使用 export default 的写法（Vue 单文件组件）

这种写法常用于 Vue 的单文件组件（.vue 文件）。它将一个 Vue 组件定义为模块，并使用 export default 导出。通常在 Vue CLI 或类似的工具链中使用。

<template>
  <div>
    <!-- 组件的 HTML 模板 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 组件的 data 数据
    };
  },
  methods: {
    // 组件的方法
  },
  created() {
    // 生命周期钩子
  }
}
</script>

<style scoped>
/* 组件的样式 */
</style>

主要特点：

• 适用于 Vue 单文件组件（.vue 文件）。
• 使用 export default 导出组件，使其可以在其他地方通过 import 引入和使用。
• 支持模块化开发，可以包含模板、脚本和样式。

2. 使用 new Vue() 的写法（实例化 Vue）

这种写法通常用于在 Vue 的传统页面或直接在 HTML 中创建 Vue 实例时使用。new Vue() 会创建一个 Vue 实例，绑定到指定的 DOM 元素上。

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

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

主要特点：

• 适用于 Vue 传统的开发方式，通常直接在 HTML 文件中创建 Vue 实例。
• 使用 el 选项绑定 Vue 实例到 DOM 元素。
• 适合简单的应用或不需要模块化的场景。

结论：

• 如果你使用的是 Vue CLI 或现代的构建工具，推荐使用 export default 的方式，即单文件组件。
• 如果你只是简单地想在一个页面中使用 Vue，可以选择 new Vue() 的方式