从 Vue2 轻松迁移到 Vue JS 3 的最佳实践？

Posted 2023-02-22

【中文标题】从 Vue2 轻松迁移到 Vue JS 3 的最佳实践？

【英文标题】：Best practices for easy migration from VueJS2 to VueJS3?

【发布时间】：2020-02-10 12:49:14

【问题描述】：

我目前正在使用 vuejs 2 和 vuetify 2 开发企业应用程序的 Web 前端。计划在发布后迁移到 Vuejs 3。

为了方便将来迁移到 vuejs 3，现在应该避免任何编码模式吗？

Vue 3 发布路线图的 github 说：

高级 API 尽可能接近 2.x。仅在必要时进行重大更改，并将通过 RFC 流程进行沟通。 (https://github.com/vuejs/roadmap)

【参考方案1】：

为了方便将来迁移到 vuejs 3，现在应该避免任何编码模式吗？

是的。应避免使用基于类的组件。它们不会被标记为过时，但无法将组合 API 与它们一起使用。类组件不再是 Vue 的未来。

关于这个主题：

Type Issues with Class API Vue 3.0 Discards Class-Based API for Reusable, Composable Function-Based Approach

【参考方案2】：

根据我在 RFC 中阅读的内容和 Vue Mastery (https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) 中的一些视频，不会有重大更改，它们只是添加新功能而不是删除旧功能。

可能我不会完全采用 Typescript 或严重依赖 Vue Mixins，因为 Vue3 的组合 API 会改进这两个功能。

【参考方案3】：

您可以从此处查看已删除的内容、当前正在开发的内容以及路线图中接受的内容：

首先你应该知道类组件正在被删除： https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 （这在what will happen for vuejs projects based on class components in vuejs v3.0? 中得到了很好的回答，但它可以在 vue3 中使用）。

这是 vuejs 路线图，对于观察其未来的实现非常有帮助： https://github.com/vuejs/vue/projects/6

这是一个将 vue2.x 选项转换为 vue3.x 之类的组合 api 的实际问答（实际上使用 vue-composition api）

odd problems in Convert Vuejs Typescript Options to Composition Api

它基于https://vue-composition-api-rfc.netlify.com/api.html，如果您想将 vue2 迁移到 vue3，这个免费视频（感谢 maximilian）“https://www.youtube.com/watch?v=V-xK3sbc7xI”将对您有所帮助。

【参考方案4】：

组合 API 似乎是主要的新功能之一。

Composition API 是一组基于函数的附加 API， 允许灵活组合组件逻辑。

详情请看这里： https://vue-composition-api-rfc.netlify.com/

示例代码

<template>
  <button @click="increment">
    Count is:  count , double is:  double 
  </button>
</template>

<script>
import  ref, computed  from 'vue'

export default 
  setup() 
    const count = ref(0)
    const double = computed(() => count * 2)

    function increment() 
      count++
    

    return 
      count,
      double,
      increment
    
  

</script>