深入解析Vue 3.6新特性Vapor Mode

# npm
npm install vue@^3.6.0 --save

# yarn
yarn add vue@^3.6.0

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {
        mode: 'vapor' // 核心配置：开启 Vapor Mode
      }
    })
  ]
});

<template&gt;
  &lt;div class="company-home"&gt;
    <!-- 导航栏（静态） -->
    <nav class="nav">
      <div class="logo">Vue 科技</div>
      <ul class="nav-list">
        <li><a href="#home" rel="external nofollow" >首页</a></li>
        <li><a href="#product" rel="external nofollow" >产品中心</a></li>
        <li><a href="#about" rel="external nofollow" >关于我们</a></li>
        <li><a href="#contact" rel="external nofollow" >联系我们</a></li>
      </ul>
    </nav><!-- Banner 图（静态） -->
    <div class="banner">
      <img src="/banner.jpg" alt="企业Banner">
    </div&gt;

    <!-- 产品介绍（静态） -->
    <section id="product" class="product-section">
      <h2 class="section-title">产品中心</h2>
      <div class="product-list">
        <div class="product-item">
          <img src="/product1.jpg" alt="产品1">
          <h3>Vue 性能优化方案</h3>
          <p>基于 Vapor Mode 的前端性能优化服务，助力项目性能飙升</p>
        </div>
        <div class="product-item">
          <img src="/product2.jpg" alt="产品2">
          <h3>跨平台开发框架</h3>
          <p>一套代码适配多端，兼顾性能与开发效率</p>
        </div>
        <div class="product-item">
          <img src="/product3.jpg" alt="产品3">
          <h3>前端监控系统</h3>
          <p>实时监控项目性能，精准定位问题</p>
        </div>
      </div&gt;
    &lt;/section&gt;

    <!-- 联系我们（静态） -->
    <section id="contact" class="contact-section">
      <h2 class="section-title">联系我们</h2>
      <p>地址：北京市朝阳区 XX 大厦 15 层</p>
      <p>电话：400-123-4567</p>
      <p>邮箱：contact@vue-tech.com</p>
    </section>
  </div>
</template>

<script setup>
// 无动态逻辑，仅静态展示
</script>

<style scoped>
.company-home {
  width: 1200px;
  margin: 0 auto;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #42b983;
}

.nav-list {
  display: flex;
  list-style: none;
}

.nav-list li {
  margin-left: 30px;
}

.nav-list a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.banner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  margin: 20px 0;
}

.section-title {
  font-size: 28px;
  text-align: center;
  margin: 40px 0 20px;
  color: #333;
}

.product-list {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

.product-item {
  width: 30%;
  text-align: center;
}

.product-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.product-item h3 {
  margin: 15px 0;
  color: #333;
}

.product-item p {
  color: #666;
  line-height: 1.5;
}

.contact-section {
  text-align: center;
  padding: 40px 0;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin: 40px 0;
}

.contact-section p {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}
</style>

<template>
  <CompanyHome />
</template>

<script setup>
import CompanyHome from './components/CompanyHome.vue';
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
}
</style>

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          mode: 'vapor' // 开启 Vapor Mode
        };
        return options;
      });
  }
};

<template>
  <div class="user-detail">
    <h2 class="detail-title">用户信息详情</h2>
    <div class="detail-content">
      <div class="detail-item">
        <span class="label">用户 ID：</span>
        <span class="value">{{ userId }}</span>
      </div>
      <div class="detail-item">
        <span class="label">用户名：</span>
        <span class="value">{{ username }}</span>
      </div>
      <div class="detail-item">
        <span class="label">性别：</span>
        <span class="value">{{ gender }}</span>
      </div>
      <div class="detail-item">
        <span class="label">邮箱：</span>
        <span class="value">{{ email }}</span>
      </div>
      <div class="detail-item">
        <span class="label">注册时间：</span>
        <span class="value">{{ registerTime }}</span>
      </div>
      <div class="detail-item">
        <span class="label">账号状态：</span>
        <span class="value status-normal">正常</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// 初始化数据（仅加载一次，无后续更新）
const userId = ref('');
const username = ref('');
const gender = ref('');
const email = ref('');
const registerTime = ref('');

onMounted(() => {
  // 模拟接口请求获取用户数据
  setTimeout(() => {
    userId.value = 'U20240601001';
    username.value = '张三';
    gender.value = '男';
    email.value = 'zhangsan@example.com';
    registerTime.value = '2024-06-01 10:30:00';
  }, 500);
});
</script>

<style scoped>
.user-detail {
  width: 800px;
  margin: 40px auto;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
}

.detail-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.label {
  font-size: 16px;
  color: #666;
  width: 100px;
  text-align: right;
  margin-right: 20px;
}

.value {
  font-size: 16px;
  color: #333;
}

.status-normal {
  color: #42b983;
  font-weight: bold;
}
</style>