Vue2 到 Vue3 — 发生了什么变化？

Vue 2 已经存在了很长一段时间，并以其简单、用户友好和轻便以及许多其他优点而闻名。Vue3 于 2020 年正式发布，据说与 Vue2 相比，它更快、更小、更易于维护且更容易定位到原生。Vue3 或多或少是 Vue2 的重写版本，并带有一些新的和显着的变化和特性。但是，Vue2 和 Vue3 的基本语法非常相似。

在 Vue2 中，随着代码的增长，组件变得不那么可读并且难以维护。Vue3中最重要的新增功能是Composition API，就是为了解决这个问题而引入的。使用 Composition API，可以根据逻辑关注点组织组件代码，这与 Vue2 基于Options API的多个组件选项中的分布式代码段不同。

除了这些主要功能之外，Vue3 中还添加了一些新更改，以使开发人员的生活更轻松。

Vue3 的新变化

以下是 Vue3 中引入的一些主要的新变化，将在本文中讨论。

1. 组合 API
2. Vue生命周期的变化
3. 传送
4. 碎片
5. 初始化代码

组合 API

使用 Vue 的优势之一是能够提取代码的可重复部分及其功能。尽管这在提高代码的可维护性和灵活性方面发挥了巨大作用，但当应用程序与许多组件一起增长时，它可能会变得更加困难。

在 Vue2 中，组件的选项如data、computed、methods、watch用于组织逻辑。这种方法使得在组件增长的情况下难以阅读和理解代码。

这是一个基本的 Vue2 代码示例。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">export default { 
  components: { Component1, Component2 }, 
  props: { 
    prop1: { 
      type: String, 
      required: true 
    } 
  }, 
  data () { 
    return { 
      object 1, 
      object 2 
    } 
  }, 
  watch: { 
    prop1: 'method1' / / 1 
  }, 
  methods: { 
    method1() { 
     // 实现
  }, 
  mounted () { 
   // 实现
  } 
}</span></span></span>

无论逻辑如何，各种代码段都分散在几个组件选项中。这种分离使得基于逻辑观点的代码难以阅读和理解，因为读者必须在代码中移动。

Composition API 提供了一个解决方案，它允许我们根据逻辑关注点来搭配代码。

setup()选项用于将属性返回给其余组件。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">import { Component1} from '...' 

// 在我们的组件内部
设置 (props) { 
  let object1 = '' 
  const method1 = () => { 
    // implementation 
  } 

  return { 
    object1, 
    method1 // 返回的函数的行为与方法
  } 
}</span></span></span>

代码的其他部分可以访问返回的内容。在 setup 内部，我们可以按逻辑关注点对代码段进行分组，因为我们可以拥有生命周期方法、计算属性、状态数据等。

Vue生命周期的变化

生命周期钩子在 Vue2 和 Vue3 中的功能类似，但使用 Composition API，对这些生命周期钩子的访问发生了如下变化。

不需要 beforeCreate和created生命周期挂钩，因为setup()正在替换它们并执行确切的功能。重要的是这些生命周期钩子在使用它们之前被导入。

例如，onBeforeMount将写为，

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">import { onBeforeMount } from 'vue' 
export default { 
  setup() { 
    // 挂载
    onBeforeMount (() => { 
      // 实现
    }) 
  } 
}</span></span></span>

换句话说，每个生命周期钩子及其内容都应该在setup()中。

传送

Teleport 提供了在逻辑上放置组件的不同位置呈现组件的能力，即使它不在应用程序的范围内。这在使用弹出窗口和模态框时特别有用。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929"><example-component> 
   <teleport to="#teleport-target"> 
     <pop-up /> 
   </teleport> 
</example-component></span><span style="color:#292929"><div id="teleport-target"></div></span></span></span>

简单地说，即使弹出窗口位于example-component 内，它也会在 ID为 teleport-target的 div 内呈现。当然，这可以通过一些 css 魔法来完成，但是 Vue3 让它变得更容易了。

碎片

在 Vue2 中，不可能在一个模板中使用多个根元素。这会导致错误，为了解决这个问题，通常使用 div。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929"><template> 
  <div> 
    <header>...</header> 
    <main>...</main> 
    <footer>...</footer> 
  </div> 
</template></span></span></span>

在 Vue3 中，可以使用 Fragments API 在模板中声明多个根而不会出现任何问题，这有助于更简洁的代码，而无需使用不必要的包装器。但是，需要明确定义属性应该分布在哪里。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929"><template> 
  <header>...</header> 
  <main v-bind="$attrs">...</main> 
  <footer>...</footer> 
</template></span></span></span>

初始化代码

在 Vue3中引入了createApp方法来初始化应用程序。此方法返回 Vue 应用程序的新实例。每个实例都可以拥有自己的功能，而不会影响其他实例。

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const app1 = createApp({}) 
const app2 = createApp({}) 
app1.directive('focus', {
    插入: el => el.focus() 
}) 
app2.mixin({ 
    /* ... */ 
} )</span></span></span>

虽然在同一个应用程序中创建多个应用程序并不常见，但当项目规模扩大时，这可能会派上用场。使用 Vue3，可以将每个应用程序配置为一个独立的对象。也可以在多个实例之间共享一些功能。

概括

尽管从 Vue2 到 Vue3 并没有太大变化，但添加了一些改进可维护性、可读性和速度的更改以及一些语法更改。本文包含介绍的一些主要更改。