准备将您的Vue应用迁移到Vue 3

时间:2022-07-24
本文章向大家介绍准备将您的Vue应用迁移到Vue 3，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

嘿！

在这篇文章中，我想分享一下我最近试用Vue 3 Beta版本的经验，特别是有关您计划将现有Vue 2应用程序迁移到升级版本Vue 3时可能要注意的一些注意事项！

下面的列表将帮助您迈向Vue 3最佳实践，并避免在Vue 2中迁移到Vue 3时可能遇到麻烦的一些用例。

让我们继续！

避免使用Vue事件总线

简短总结：不要使用$on/$once/$off API，因为它会在Vue公司3被弃用。

如果您听说过事件总线，那么当您遇到需要为从孩子向父母发送事件或从孩子向父母发送事件的快捷方式的情况下，它是Vue开发中的常用术语。您只需在浏览器中搜索“事件事件总线”，就会发现很多说明它的文章。

需要注意的一件事是，这不是Vue recommended 推荐的官方方法。我之所以这么说，是因为您可能永远不会在Vue官方文档中看到Event Bus。最接近的参考来自Vue 1.x的迁移指南，该指南在此处称为“ eventHub”，建议您改用Vuex。

在简单的情况下，该模式可以代替$ dispatch和$ broadcast，但是对于更复杂的情况，建议使用专用的状态管理层，例如Vuex。

您也可以查看RFC文档，以了解为什么他们不推荐它。

由于事件总线概念实际上是一种发布-订阅模式，这是编程中的一种常用方法，因此您实际上仍然可以使用该概念，但是可以使用mitt之类的不同库。?

这是事件总线以及如何重构它的示例：

// Vue 2 example of event bus
import Vue from 'vue';
const eventBus = new Vue();

// subscribe
eventBus.$on('sandwich-made', () => console.log('sandwich made!'));

// publish
eventBus.$emit('sandwich-made');
// Refactor to use 3rd party library like mitt
import mitt from 'mitt';
const eventBus = mitt();

// subscribe
eventBus.on('sandwich-made', () => console.log('sandwich made!'));

// publish
eventBus.emit('sandwich-made');

将Filter函数重构为Method

根据RFC docs，过滤器将被删除。

Filter在那里可以帮助您“格式化”您的值，例如：大写，添加货币，短url等。也许它也受到Angular Filter的启发。看起来不错，因为您可以在模板语法中实现它。例如，下面是一个toCurrency将货币格式添加到价格整数值的过滤器：

<div class="currency">{{ price | toCurrency }}</div>

注意：价格值为25，然后过滤toCurrency为$ 25.00

尽管它看起来不错，但是请记住，它实际上是一个“语法糖”，因为在运行时，toCurrency只要更新价格，它就始终会运行以格式化价格。

如果你重构toCurrency作为method替代，它会被写成这样：

<div class="currency">{{ toCurrency(price) }}</div>

Vue脚本中的重构仅是将函数从filter移至method：

// before
{
  filter: {
    toCurrency (value) {
      return `$${value.toFixed(2)}`
    }
  }
}

// after
{
  methods: {
    toCurrency (value) {
      return `$${value.toFixed(2)}`
    }
  }
}

凉！但是，如果将filter登记为全局过滤器怎么办？

Vue.filter('toCurrency', function (value) {
  return `$${value.toFixed(2)}`
})

在这种情况下，我建议您删除上面的全局过滤器代码，并将过滤器功能移到首先成为可以共享的纯辅助功能。例如：

// helper/filter.js

export function toCurrency (value) {
  return `$${value.toFixed(2)}`
}

然后，您可以将辅助函数导入到需要使用它的组件中。例如：

// price-component.vue
import { toCurrency } from './helper/filter'

// your vue object
{
  methods: {
    toCurrency 
  }
}

注意：只是toCurrency可以使用；）感谢ES6对象属性的简写

将组件重构model为.sync

根据RFC文档，Vue 3将弃用modelVue组件中的选项，并将其替换sync为multiple model。

如果您model在组件中使用了选项来设置双向数据绑定，则可以将其重构为.sync。例子如下：

// BEFORE

// parent component
<child-component v-model="visible"/>

// the model option in the child component's Vue object
<script>
{
  model: {
    prop: 'visible',
    event: 'change'
  }
}
</script>

重构使用.sync：

// AFTER

// parent component
<child-component v-bind:visible.sync="visible"/>

// delete the model option in the child component's Vue object

当您需要升级到Vue 3的时候，您只需将重命名为.sync即可v-model：

// Vue 3

// parent component
<child-component v-model:visible="visible"/>

容易挤柠檬！?

警惕使用第三方插件

与其他框架一样，Vue框架的魅力在于，它为社区提供了创建自己的插件的API。

但是在Vue 3中，将进行重大更改，这将使某些插件不再兼容。一个主要的变化是，插件的安装和应用程序的初始化将与原始Vue实例保持不变。例如：

BEFORE, in Vue 2
Vue.use(myPlugin);
new Vue({/* your vue initialization */});

// AFTER, in Vue 3
const app = createApp(); // new method to initialize Vue
app.use(myPlugin);

在插件的作者对其进行升级之前，最有可能无法重构代码以使用Vue 3中的插件。因此，这意味着，如果您打算进行迁移，则应考虑使用第三方插件，因为这将成为阻止程序。

检查您正在使用的插件的问题或路线图，以查看它们是否计划升级以支持Vue3。这是将支持Vue 3的插件的示例：

  • Bootstrap Vue
  • Vue Multiselect
  • Vuetify

如果您使用过的插件还没有升级到Vue 3的计划，则可以通过要求该问题的作者支持Vue 3甚至参与其中的升级来帮助您做出贡献。

使用@vue/composition-api写您的组件

我非常感谢Vue社区提供的@vue/composition-api?。它不仅可以供开发人员使用Composition API进行动手操作，而且还提供API，它将成为Vue 3中的核心方法。

例如，defineComponent。它将成为在Vue 3中编写Vue组件的新标准，并且您已经可以在Vue 2应用程序中使用它了！

要使用它，请安装@vue/composition-api并更换Vue对象组件启动。例如：

// BEFORE
import Vue from 'vue';

export default Vue.extend({
  name: 'my-component',
  /* your component props, data, methods, etc. */
});

只需替换它即可使用defineComponent：

// AFTER
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'my-component',
  /* your component props, data, methods, etc. */
});

你问有什么区别？几乎没有区别，这就是它的美！您的组件应与往常一样工作，并添加了“props”，现在您可以重构组件以使用Composition API，如果您希望：

// Refactor to use setup()
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'my-component',
  setup (props) {
    /* your component props, data, methods, etc. */
  }
});

注意：如果您喜欢Typescript，我敢肯定您会喜欢composition API，因为它将有助于改善组件的输入。;）

更重要的是

还会有另一个重大变化，例如:

  • 渲染功能API更改
  • 将作用域内的插槽统一为仅插槽
  • 要删除的keyCode修饰符
  • 内联模板将被删除

但是，如果您不经常使用它，并且您认为可以轻松地对其进行重构，则取决于您决定是早晚进行更改。

摘要

我希望本文能帮助您为升级到Vue 3做好准备。作为Vue开发人员，我很高兴看到它的到来，因为它使用更好的API来处理反应性，更多的Typescript支持以及开发中的更好做法。

如果我错过了要定义的任何API或说明，请告诉我们，感谢您的反馈。谢谢，祝你有美好的一天！

随机文章
Javascript知识点必读
最近更新