Vue.js: Vue.js 简介

Bundle size:     850KB → 280KB    (-67%)
Initial load:    3.2s  → 0.9s    (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market:      growing 35% YoY

✅ Vue 3 是当前主版本（2020-09 发布，2026 已稳定 5+ 年）
✅ Vue 2 已于 2023-12 EOL（End of Life），不再维护
✅ 90% 的新项目、100% 的新生态工具都基于 Vue 3
✅ Composition API 是 Vue 团队推荐的现代写法
✅ TypeScript 支持显著改善，团队代码质量 ↑

❌ Vue 2 只在维护老项目时需要
❌ 不学 Vue 3 = 错过 Vue 生态 95% 的现代工具

// Options API - 按选项分块（传给 createApp）
{
  data() {
    return { count: 0, name: 'Alice' }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}

// Composition API - 按逻辑分块（在 setup() 函数中）
const { ref, computed, onMounted } = Vue

setup() {
  const count = ref(0)
  const name = ref('Alice')

  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  onMounted(() => {
    console.log('Component mounted')
  })

  return { count, name, doubleCount, increment }
}

阶段 1（本教程 Phase 1-3）：Vue 3 核心 + Composition API
阶段 2（本教程 Phase 4）：Vue Router + Pinia + 进阶 API
阶段 3（本教程 Phase 5）：Vite + 真实项目 + 部署
进阶（推荐后续学）：Nuxt 3 SSR / Vitest 测试 / 性能优化

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h1>{{ greeting }}</h1>
  <p>You clicked the button <strong>{{ count }}</strong> times.</p>
  <button @click="increment">Click me</button>
  <p>By {{ author }}, {{ currentYear }}</p>
</div>

<script>
const { createApp, ref, computed } = Vue
createApp({
  setup() {
    const count = ref(0)
    const author = ref('Alice')
    const currentYear = computed(() => new Date().getFullYear())
    const greeting = computed(() => `Hello Vue 3! Welcome, ${author.value}!`)
    function increment() { count.value++ }
    return { count, author, currentYear, greeting, increment }
  }
}).mount('#app')
</script>

Hello Vue 3! Welcome, Alice!

You clicked the button 5 times.

[Click me]

By Alice, 2026

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="count++">Clicked {{ count }} times</button>
</div>

<script>
const { createApp, ref } = Vue
createApp({
  setup() {
    return {
      message: ref('Hello Vue 3!'),
      count: ref(0)
    }
  }
}).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <p>Count: {{ count }}, Double: {{ doubleCount }}</p>
  <button @click="increment">+1</button>
</div>

<script>
Vue.createApp({
  data() { return { count: 0, message: 'Hello Vue 3!' } },
  computed: { doubleCount() { return this.count * 2 } },
  methods: { increment() { this.count++ } }
}).mount('#app')
</script>