1. 初始化方式的世纪跨越

1.1 回顾Vue2时代的"霸道总裁"

在Vue2中，我们总是这样开启一个项目：

// Vue2.7.10项目初始化
import Vue from 'vue'

// 全局注册组件（所有实例都将继承）
Vue.component('my-button', {
  template: '<button>老式按钮</button>'
})

// 创建根实例（暗藏全局污染风险）
new Vue({
  el: '#app',
  render: h => h(App)
})

这种方式的"霸道"体现在：任何全局配置都会污染所有Vue实例。就像在公共泳池换水系统里滴墨水，所有池子都会被染色。

1.2 Vue3的模块化哲学

对比Vue3的现代化做法：

// Vue3.4.21项目初始化
import { createApp } from 'vue'

// 工厂模式生产独立应用实例
const app = createApp({
  template: `<div>新时代应用</div>`
})

// 局部注册组件（仅限当前应用）
app.component('modern-button', {
  template: '<button>带隔离的新按钮</button>'
})

// 精准挂载到DOM节点
app.mount('#modern-app')

这种改变就像从大通铺搬进LOFT公寓，每个应用拥有独立卫浴（配置隔离），享受私人空间（作用域隔离）。

2. 核心差异的代码全接触

2.1 全局配置的癌症手术

Vue2的全局混入就像遗传病：

// Vue2全局混入（全家族共享基因）
Vue.mixin({
  created() {
    console.log('所有组件都会继承这条日志')
  }
})

Vue3的隔离方案如同基因剪裁：

// Vue3实例级混入（选择性继承）
const app = createApp({ /* ... */ })
app.mixin({
  created() {
    console.log('仅本应用实例有效')
  }
})

2.2 组件树的身份革命

看这段组合式API的威力：

<script setup>
// Vue3.4 + Composition API（技术栈明确）
import { ref, provide } from 'vue'

// 组件级别的状态管理
const user = ref('王大锤')
provide('user', user)
</script>

<template>
  <!-- 独立的组件作用域 -->
  <child-component />
</template>

传统选项式API像集体宿舍，所有物品共享；组合式API则是智能保险柜，精准管理资产。

3. 实战对比：从TodoList看进化

3.1 Vue2的古典实现

// Vue2.7选项式写法
new Vue({
  el: '#todo-v2',
  data() {
    return {
      tasks: [],
      newTask: ''
    }
  },
  methods: {
    addTask() {
      this.tasks.push(this.newTask)
      this.newTask = ''
    }
  },
  template: `
    <div>
      <input v-model="newTask">
      <button @click="addTask">添加</button>
      <ul>
        <li v-for="task in tasks">{{ task }}</li>
      </ul>
    </div>
  `
})

3.2 Vue3的现代重构

<script setup>
// Vue3.4组合式API
import { ref } from 'vue'

const tasks = ref([])
const newTask = ref('')

const addTask = () => {
  tasks.value.push(newTask.value)
  newTask.value = ''
}
</script>

<template>
  <div class="todo-modern">
    <input v-model="newTask" @keyup.enter="addTask">
    <button @click="addTask">智能提交</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
      </li>
    </ul>
  </div>
</template>

这种改进就像从手动挡升级到自动驾驶，代码组织更符合功能模块划分。

4. 技术决策指南

4.1 典型应用场景

  • 微前端架构：当需要同时运行多个独立Vue应用时，createApp的隔离性堪称完美解决方案
  • 插件开发：第三方库可以使用createApp单独构建沙箱环境进行测试
  • 渐进式升级：在同一个页面中并存新旧两个Vue版本的应用实例

4.2 优劣势全景分析

createApp优势：

  • 配置隔离带来的可维护性提升
  • Tree-shaking支持减少打包体积
  • 更适合大型复杂应用架构

历史包袱提醒：

  • 全局挂载方式的改变需要适配（如this.$root访问）
  • 插件安装方式需要重构（从Vue.use到app.use）
  • 混入策略变化带来的升级成本

4.3 升级避坑指南

  • 全局过滤器迁移：建议改为工具函数或计算属性
  • Vue.prototype扩展：改用provide/inject机制
  • 事件总线重构：推荐使用mitt等专用库替代
  • 异步组件加载：需要适配新的defineAsyncComponent API

5. 框架设计的未来启示

Vue3的这次变革，反映出前端框架发展的三大趋势：

  1. 模块化：从"大而全"转向"按需取用"
  2. 隔离性：应用级别的沙箱机制成为标配
  3. 渐进式：支持平滑升级和局部替换

这些改变不仅解决了Vue2时代的历史包袱，更为未来的框架演进铺平道路。就像从蒸汽机车升级到磁悬浮，createApp不仅是API的改变，更是设计理念的质变。