从 VueJS2 轻松迁移到 VueJS3 的最佳实践?
Best practices for easy migration from VueJS2 to VueJS3?
我目前正在使用 vuejs 2 和 vuetify 2 开发企业应用程序的 Web 前端。计划在发布后迁移到 Vuejs 3。
为了将来轻松迁移到 vuejs 3,现在是否应该避免任何编码模式?
Vue 3 发布路线图的 github 说:
High level API remains as close to 2.x as possible. Breaking changes only made where necessary, and will be communicated through the RFC process.
(https://github.com/vuejs/roadmap)
根据我在 RFC 和 Vue Mastery (https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) 中阅读的一些视频,不会有重大更改,它们只是添加新功能而不是删除旧功能.
可能我不会完全采用 Typescript 或严重依赖 Vue Mixins,因为 Vue3 的组合 API 将改进这两个功能。
组合 API 似乎是主要的新功能之一。
The Composition API is a set of additive, function-based APIs that
allow flexible composition of component logic.
详情请看这里:
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>
Are there any coding pattern which should be avoided now for any easy future migration to vuejs 3?
是的。应避免使用基于 Class 的组件。它们不会被标记为已过时,但无法对它们使用组合 API。 Class 组件不再是 Vue 的未来。
关于这个主题:
您可以从此处查看路线图中放弃的内容、当前正在开发的内容以及接受的内容:
首先你应该知道 class 组件正在被删除:
https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
(在 中得到了很好的回答,但它会在 vue3 中工作)。
这是 vuejs 路线图,对于观察其未来的实现非常有帮助:
https://github.com/vuejs/vue/projects/6
这是一个将 vue2.x 选项转换为 vue3.x 的实际问答,例如组合 api(实际上使用 vue-composition api)
基于https://vue-composition-api-rfc.netlify.com/api.html and this free video (thanks to maximilian)"https://www.youtube.com/watch?v=V-xK3sbc7xI" 如果您想将 vue2 迁移到 vue3,这将对您有所帮助。
我目前正在使用 vuejs 2 和 vuetify 2 开发企业应用程序的 Web 前端。计划在发布后迁移到 Vuejs 3。
为了将来轻松迁移到 vuejs 3,现在是否应该避免任何编码模式?
Vue 3 发布路线图的 github 说:
High level API remains as close to 2.x as possible. Breaking changes only made where necessary, and will be communicated through the RFC process. (https://github.com/vuejs/roadmap)
根据我在 RFC 和 Vue Mastery (https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api) 中阅读的一些视频,不会有重大更改,它们只是添加新功能而不是删除旧功能.
可能我不会完全采用 Typescript 或严重依赖 Vue Mixins,因为 Vue3 的组合 API 将改进这两个功能。
组合 API 似乎是主要的新功能之一。
The Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.
详情请看这里: 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>
Are there any coding pattern which should be avoided now for any easy future migration to vuejs 3?
是的。应避免使用基于 Class 的组件。它们不会被标记为已过时,但无法对它们使用组合 API。 Class 组件不再是 Vue 的未来。
关于这个主题:
您可以从此处查看路线图中放弃的内容、当前正在开发的内容以及接受的内容:
首先你应该知道 class 组件正在被删除:
https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
(在
这是 vuejs 路线图,对于观察其未来的实现非常有帮助: https://github.com/vuejs/vue/projects/6
这是一个将 vue2.x 选项转换为 vue3.x 的实际问答,例如组合 api(实际上使用 vue-composition api)
基于https://vue-composition-api-rfc.netlify.com/api.html and this free video (thanks to maximilian)"https://www.youtube.com/watch?v=V-xK3sbc7xI" 如果您想将 vue2 迁移到 vue3,这将对您有所帮助。