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

避免使用 Vue 事件总线

将 Filter 函数重构为 Method

将您的组件重构model为.sync

谨慎使用第三方插件

用于@vue/composition-api编写你的组件

更多内容

概括

嘿呀！

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

以下列表将帮助您迈向 Vue 3 最佳实践，并且如果您要迁移到 Vue 3，还可以避免 Vue 2 中可能遇到的一些麻烦的用例。

让我们开始吧！

避免使用 Vue 事件总线

简短摘要：不要使用$on// API $once，$off因为它将在 Vue 3 中被弃用。

如果你听说过事件总线 (Event Bus)，那么它是 Vue 开发中一个常用的术语，每当你需要创建一个快捷方式将事件从子组件发送到父组件，或从父组件发送到子组件时，它都会派上用场。你可以在浏览器中搜索“vue event bus”，找到很多解释它的文章。

需要注意的是，这不是 Vue 官方推荐的方法🤯。我之所以这么说，是因为你可能永远不会在 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 文档，过滤器将被删除。

过滤器的作用是帮助你“格式化”值，例如：转换为大写、添加货币、短网址等等。或许它也受到了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为 多个model。

如果你在组件中使用了modeloption 来设置双向数据绑定，你可以将其重构为.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 中的插件。这意味着，如果你计划迁移，应该慎重考虑使用第三方插件，因为这会成为阻碍。

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

• 引导 Vue
• Vue 多选
• Vuetify

如果你使用的插件还没有升级到 Vue 3 的计划，你可以在 issue 中请求作者支持 Vue 3，甚至参与到他们的升级中来，贡献一份力量。🤗

用于@vue/composition-api编写你的组件

我非常感谢 Vue 社区提供的@vue/composition-api🥰。它不仅可以帮助开发者亲手使用Composition API，而且还提供了将成为 Vue 3 核心方法的 API。

举个例子，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. */
});

你可能会问，这有什么区别？几乎没有区别，这就是它的美妙之处！你的组件将像往常一样工作，并且还有一个“额外好处”，那就是现在你可以重构你的组件来使用 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 或需要定义的注释，请告知我，我非常感谢您的反馈。谢谢，祝您拥有美好的一天！