从VueJS2轻松迁移到VueJS3的最佳实践？

Question

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

为了将来轻松迁移到vuejs 3，是否应该避免使用任何编码模式？

Vue 3发布路线图的github上说：

  

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

Answer 1

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

  

Composition API是一组基于功能的加性API，   允许灵活地构成组件逻辑。

有关详细信息，请参见此处： https://vue-composition-api-rfc.netlify.com/

示例代码

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

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Answer 2

  

为了将来轻松迁移到vuejs 3，是否应该避免使用任何编码模式？

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

关于这个主题：

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

Answer 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（例如composition 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”将对您有所帮助。

Answer 4

根据我在RFC中阅读的内容以及Vue Mastery（https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api）中的一些视频，不会有重大变化，它们只是添加了新功能，而不是删除了旧功能。 / p>

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