如果你从 Vue 2 迁移，Vue 3 中将会出现一些重大变化

Vue 应用程序初始化

允许多个v-model，并弃用model选项

事件总线已弃用

filter已弃用

摘要⭐

嘿呀！

感谢 Vue Core 团队，我们可以尝试最期待的 Vue 3，它有很多值得期待的重大改进和功能。

目前它处于测试版本，如果您想亲身体验最新的变化，您可以尝试安装它并在其github 版本中跟进变化。

作为一名 VueJS 开发者，我体验过 Vue 2 当前的代码实现，在尝试 Vue 3 时，我注意到它有一些重大变更。但别误会，我个人很喜欢这些重大变更，因为我相信它们有助于提高代码质量，并降低出现意外 bug 的可能性。此外，这些重大变更来自 Vue Core 团队已达成一致的RFC，因此请查看它们以了解更多详细信息。

唉呀，我们走了！

Vue 应用程序初始化

在 Vue 2 中，插件的安装通常会在Vue对象的全局实例中完成，然后我们创建一个newVue 实例来初始化 Vue 应用。例如：

// Vue 2 example of initialization
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App.vue';

// install vuex plugin
Vue.use(Vuex);
const store = new Vuex.store(/* store configuration object */);

// initiate the vue app
new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

Vue如果你需要在同一页面创建多个应用，则此实现存在缺陷。由于它使用全局Vue实例来安装应用，因此你无法启动多个Vue应用并安装不同的插件。这可能会导致 Vue 实例污染。

在 Vue 3 中，插件安装和应用程序初始化与原始 Vue 实例是不变的，因为您必须先启动 Vue 应用程序，然后才能安装插件。

// Vue 3 example of initialization
import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue';

// initialize the store object
const store = createStore(/* store configuration object */);

// create the app and install the store
createApp(App)
  .use(store)
  .mount('#app');

注意，这里没有全局Vue定义和修改。这样一来，你就可以确保每个应用程序使用的每个插件都是特定的，不会污染其他Vue应用程序。太棒了！😄

RFC 中的更多详细信息和背后的原因：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

允许多个v-model，并弃用model选项

💓 在我让任何人感到恐慌之前，请注意API上的这些变化v-model不会影响v-model诸如<input>, <select>, <textarea>等原生元素的使用。

model我在上面的标题中提到的选项是我们在自定义组件上用于自定义的模型选项。所以，是的，这个重大更改仅适用于使用选项的自定义组件，正如这里提到的，它将在 Vue 3 中被删除。v-modelmodel

在 Vue 2 中，你只能定义一个 propsv-model来进行双向数据绑定。如果你需要多个 props 来进行双向数据绑定，可以使用.sync。

// Vue 2 example of v-model and sync
<my-custom-component
  v-bind:title.sync="title"
  v-model="visible"/>

虽然v-model和.sync指令的功能类似，但学习起来会更费劲。因此，在 Vue 3 中，它们.sync已被弃用，你可以使用多个指令v-model来代替！😍

Vue 3 example of v-model
<my-custom-component
  v-model:title="title"
  v-model:visible="visible"/>

更加稳定，与队友的争吵更少，盈利！😄

RFC 中的更多详细信息和背后的原因：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md

事件总线已弃用

你喜欢Vue 中的事件总线概念吗？

如果是的话，这可能会让你有点失望。Vue 没有关于 Event Bus 的官方文档，但 Vue 2 实例中内置的 API 允许我们使用vm.$emitandvm.$on方法创建一个发布-订阅对象。

// Vue 2 example of event bus

const eventBus = new Vue();

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

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

这些变化背后有一个很好的动机，因为 Vue 鼓励更多状态驱动的数据流，即数据从父组件传递到子组件，事件从子组件发送到父组件。有好处！😄

但是当然在 Vue 3 中仍然允许使用事件总线模式。如果您仍然需要它，您可以安装任何第三方库或编写自己的库。

RFC 中的更多详细信息和背后的原因：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md

filter已弃用

过滤器是 Vue 早期引入的功能之一，用于轻松映射渲染值。它通常用于价格标签、货币和大写字母。

过滤器的用途通常是为了美化你的vue模板代码：

// Vue 2 example of filter
<div class="name">{{ user.name | capitalize }}</div>

<script>
import capitalize from './filter/capitalize';
export default {
  /* vue configuration */,
  filter: {
    capitalize
  }
}
</script>

为了简单易用和可复用，我们鼓励使用 Filter。但是，它也可以被替换，methods因为性能方面没有差异。移除 Filterfilter将鼓励在每个组件上定义更明确的方法，如果您需要在多个组件上复用 Filter 函数，只需将其导入并注册为方法的一部分即可。

// Vue 3 example of filter
<div class="name">{{ capitalize(user.name) }}</div>

<script>
import capitalize from './filter/capitalize';
export default {
  /* vue configuration */,
  methods: {
    capitalize
  }
}
</script>

这只是我个人的观点，但如果您期待Vue 3 Composition API，您可能会注意到filter也可以通过在设置中手动返回过滤器功能来轻松替换它。

// Vue 3 composition api setup example
import { useState, useRefs } from 'vue';
import capitalize from './filter/capitalize';

setup () {
  const data = {
    user: { name: 'Albert' }
  }

  return {
    ...useRefs(data),
    capitalize
  }
}

弃用filter将帮助我们提高代码的一致性，并且无需再纠结于函数是否应该注册到filter或 中method。太棒了！😄

RFC 中的更多详细信息和背后的原因：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md

摘要⭐

随着 Vue 3 即将发布，为了提升代码质量，这些改动将朝着更好的方向发展。所有这些重大变更都已在RFC中仔细考虑，欢迎随时查看并参与讨论！

最后，感谢您阅读本文！希望这篇文章能帮助任何考虑将现有 Vue 2 应用程序迁移到 Vue 3 的人，让他们了解这些变化并做好准备！

您觉得这些重大变更怎么样？非常感谢您的评论和建议，这将帮助我改进文档，提升我的写作水平！

注意：在最终发布稳定版本之前，此文档将根据所做的任何更改进行更新。