从 Vue 2 到 Vue 3：实例创建与模板 key 的迁移要点

手头有老旧的 Vue 2 老项目迁移到 Vue 3，有哪些需要关注的点？

要对比两个版本的差异，不妨分别创建一个 Vue 2 和一个 Vue 3 项目，先在小范围进行实验验证，确认没问题后再批量修改。

如何创建 Vue 2 项目？

pnpm create vue@legacy vue2-demo

注意，@legacy 标签是必须的，它让 Vite 创建 Vue 2 项目。否则，默认创建的都是 Vue 3 项目。

如何创建 Vue 3 项目？和上述命令差不多，就差一个 @legacy 标签。

pnpm create vue vue3-demo

在应用入口文件 src/main.js 中，Vue 2 的 Vue 构造函数，变成了 Vue 3 的 createApp() 工厂函数。

如果页面只有一个 Vue 实例，两者差别不大。

如果页面同时共存多个 Vue 实例，Vue 2 所有实例共享一套全局配置，而 Vue 3 实例的配置各自独立，互不干扰。

在页面挂载时，两者还有一个小小的不同。Vue 2 组件会用新内容替换容器元素，而 Vue 3 会成为容器元素的子元素。

在列表循环中，为了标识元素唯一性，需要为元素定义 key 值。

Vue 2 的 <template> 元素无法定义 key 值，只能定义在实际元素上。Vue 3 的 <template> 元素支持定义 key 值。

参考资料：Vue 3 Migration Guide