vue实现的两种模式

Vue 实现的两种模式

Vue.js 主要支持两种实现模式：单文件组件（SFC）和运行时编译模式。这两种模式适用于不同的开发场景和需求。

单文件组件（SFC）模式

单文件组件是 Vue.js 最常用的开发模式，通过 .vue 文件将模板、脚本和样式封装在一个文件中。这种方式适合大型项目，具有以下特点：

• 文件结构清晰，包含 <template>、<script> 和 <style> 三个部分。
• 支持预处理器如 Pug、SCSS 和 TypeScript。
• 需要通过构建工具（如 Webpack 或 Vite）编译为浏览器可执行的代码。

示例代码：

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

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

<style scoped>
div {
  color: red;
}
</style>

运行时编译模式

运行时编译模式直接在 HTML 中通过 <script> 引入 Vue.js，无需构建工具。适合快速原型开发或小型项目：

• 直接使用 CDN 引入 Vue.js。
• 模板通过字符串或 DOM 内联方式定义。
• 功能相对受限，不支持单文件组件的高级特性。

示例代码：

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app');
</script>

选择建议

• 单文件组件：适合复杂项目，需要模块化、构建工具支持和更好的开发体验。
• 运行时编译：适合快速验证或小型项目，无需构建步骤，直接嵌入 HTML 使用。