vue2和vue3的写法差异？

### Vue2与Vue3写法区别

#### 虚拟DOM的改进
Vue 3 对虚拟 DOM 进行了重写，提升了渲染效率和内存占用情况。这种底层架构上的改变使得应用运行更加流畅高效[^1]。

#### 插槽(Slot)语法更新
在 Vue 2 中可以使用 `slot="xxx"` 来定义具名插槽，在 Vue 3 则不再支持这种方式，取而代之的是更统一且功能更强的 `v-slot` 指令来指定作用域插槽的位置以及传递数据给子组件。例如：

<!-- Vue2 -->
<uni-nav-bar>
    <view slot="left" class="city">
        <!-- ... -->
    </view>
</uni-nav-bar>

<!-- Vue3 -->
<uni-nav-bar>
    <template v-slot:left>
        <view class="city">
            <!-- ... -->
        </view>
    </template>
</uni-nav-bar>

#### 组件属性(props)

Vue 3 修改了一些有关 props 定义的方式，现在允许开发者通过 TypeScript 类型声明来进行静态类型检查和支持更好的编辑器提示服务[^4]。

// Vue2
props: {
    message: String,
}

// Vue3 (TypeScript)
interface Props {
    message?: string;
}
defineProps<Props>();

---

### 迁移指南要点

当考虑从 Vue 2 升级到 Vue 3 时，由于二者存在一定的兼容性和特性差异，建议采取渐进式的迁移策略，并充分测试现有业务逻辑以确保平稳过渡[^2]。

- **逐步替换旧版依赖**：先将项目中的第三方库版本同步至最新稳定版；
- **调整模板结构**：按照上述提到的新规修改 HTML 结构；
- **重构代码片段**：针对 API 变化部分重新编写相应模块；
- **利用官方工具辅助**：借助社区提供的自动化脚本简化重复劳动；