轻松搞定，将前端项目从Vue2迁移到Vue3(上）

最新推荐文章于 2024-05-05 11:23:11 发布

Java学研大本营

最新推荐文章于 2024-05-05 11:23:11 发布

阅读量1.6k

点赞数 26

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/u013643074/article/details/135333148

版权

全面讲解Vue 2到Vue 3的迁移指南。

微信搜索关注《Java学研大本营》

Vue 3的到来标志着一个全新的突破性功能时代的开始。从Vue 2到Vue 3的演变为开发人员提供了机会，让他们充分发挥这一优秀框架的潜力，并始终处于Web开发趋势的前沿。

在本文中，将带您了解从Vue 2到Vue 3的平滑迁移过程，揭示Vue 3带来的重大进步。还会介绍如何处理在迁移过程中已弃用和已删除的部分。

Vue 3 新功能
Vue 3 已弃用和已删除的项目
逐步迁移指南：将您的 Vue 2 应用程序转换为 Vue 3

奠定基础：建立 Vue 2 项目
安装 Vue 的迁移构建
修复迁移构建错误
解决包兼容性问题
解决迁移构建警告
迁移到 Vue 3 的组合 API
测试并确保应用程序的性能和稳定性
卸载迁移构建

1 Vue 3 新功能

1.1 组合 API

组合 API为我们提供了一种灵活的方式来组织组件逻辑，更易于代码在组件之间进行重复使用，并且能够提供更好的类型检查。与选项 API相比，组合 API更易于维护。

虽然组合 API在Vue 2.7中通过官方维护的@vue/composition-api插件可用，但在Vue 3中，它主要与<script setup>结合使用。

1.2 更好的类型支持

Vue 3 的代码库完全使用 TypeScript 编写，并具有自动生成的类型定义。它具有更好的类型推断和对 TypeScript 可选链接和空值合并运算符的支持。

1.3 改进的虚拟

DOM 算法 Vue 3 中的虚拟 DOM 已经完全重新设计。它利用了一种新的差异算法和基于编译器的优化来加速渲染。

1.4 Fragments，又名多个根

在 Vue 3 中，我们可以为单个组件创建多个根，而这在 Vue 2 中是不可行的。

Vue 2 语法

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

Vue 3 语法： 组件现在可以有多个根节点！但是，这需要开发人员明确定义属性应该分布在哪里。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

1.5 Teleport

<Teleport> 是一个内置组件，允许我们将组件模板的一部分“传送”到存在于该组件 DOM 层次结构之外的 DOM 节点中。

<demo-component>
   <teleport to="#teleport-area">
     <pop-up />
   </teleport>
</demo-component>
<div id="teleport-area"></div>

<Teleport> 的 to 目标期望是 CSS 选择器字符串或实际 DOM 节点。当 <Teleport> 组件被挂载时，传送到目标必须已经存在于 DOM 中。

1.6 SFC 驱动的 CSS 变量（`<style>` 中的 `v-bind`）

在 Vue 3 中，样式标签支持使用 v-bind CSS 函数将 CSS 值链接到动态组件状态。

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

2 Vue 3 已弃用和已删除的项目 ❌

2.1 过滤器

在 Vue 3 中，过滤器被删除。我们可以使用方法或计算属性。您可以参考下面的示例。

在 Vue 2 中：

<template>
  <div>{{ name | uppercase }}</div>
</template>
  
<script>
export default {
  data: function () {
    return {
      name: "milan",
    };
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

**在 Vue 3 中：用计算属性替换过滤器 **

<template>
  <div>{{ uppercaseName }}</div>
</template>

<script>
export default {
  data: function () {
    return {
      name: "milan",
    };
  },
  computed: {
    uppercaseName: function() {
      return this.name.toUpperCase();
    }
  }
};
</script>

2.2 v-model

v-model 属性和事件默认名称已更改：

PROP：value ⟶ modelValue
EVENT：input ⟶ update:modelValue
BREAKING：v-bind 的 .sync 修改器和组件model选项已被删除，并替换为 v-model 上的参数
NEW：现在可以在同一组件上绑定多个 v-model 绑定
NEW：添加了创建自定义 v-model 修改器的功能。

**Vue 2 中的 v-model **

<template>
  <ChildComponent v-model="pageTitle" />
  <!-- OR -->
  <ChildComponent :value="pageTitle" @input="pageTitle=$event" />
</template>

**Vue 3 中的 v-model **

<template>
  <!-- Single v-model -->
  <ChildComponent v-model="pageTitle" />
  <!-- OR -->
  <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  

  <!-- Multiple v-model -->
  <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />
  <!-- OR -->
  <ChildComponent
    :title="pageTitle"
    @update:title="pageTitle = $event"
    :content="pageContent"
    @update:content="pageContent = $event"
  />
</template>

Vue 2 中的事件

<script lang="ts">
  export default {
    methods: {
      updateTitle() {
        this.$emit('input')
      }
    }
  }
</script>

Vue 3 中的事件

<script lang="ts">
  export default {
    props: {
      modelValue: String
    },
    emits: ['update:pageTitle'],
    methods: {
      changeTitle(title) {
        this.$emit('update:pageTitle', title)
      }
    }
  }
</script>

2.3 内联模板

在 Vue 2 中，inline-template属性允许子组件使用其内部内容作为模板，而不是分发它。

然而，Vue 3 不再支持此功能。如果您在 Vue 2 中使用 inline-template，则可以改用默认插槽重构组件。这种方法提供了明确的数据作用域，同时仍允许您编写嵌入式子内容以提高便利性。

2.4 命名和作用域插槽

在 Vue 3 中，命名和作用域插槽具有不同的语法。要标识插槽名称，请使用 v-slot 指令或其 # 简写。

Vue 2 中的插槽

<template>
  <div>
    <template slot="heading" slot-scope="slotProps">
      <h1>Slot ({{ slotProps.items.length }})</h1>
    </template>
  </div>
</template>

Vue 3 中的插槽

<template>
  <div>
    <template #heading="slotProps">
      <h1>Slot ({{ slotProps.items.length }})</h1>
    </template>
  </div>
</template>

2.5 全局 API 应用程序实例

从技术上讲，Vue 2 没有“应用程序”的概念。我们定义为应用程序的是通过 new Vue() 创建的根 Vue 实例。从相同的 Vue 构造函数创建的每个根实例共享相同的全局配置。

当在同一页上使用具有不同全局配置的多个“应用程序”时，此全局配置会带来挑战。

// 这会影响所有的根实例
Vue.mixin({
  /* ... */
})

const app1 = new Vue({ el: '#app-1' });
const app2 = new Vue({ el: '#app-2' });

为了避免这些问题，Vue 3 引入了一种创建 Vue 应用程序的新方法——createApp。

const app = createApp(App);
// 这只会影响一个实例
app.mixin(/* ... */);
app.mount("#app");

2.6 关键属性

NEW: v-if/v-else/v-else-if 分支上不再需要 key，因为 Vue 现在会自动生成唯一的 key。

BREAKING: 如果您手动提供 key，则每个分支都必须使用唯一的 key。

BREAKING: <template v-for> 的 key 应该放在 <template> 标签上（而不是放在其子元素上）。

2.7 v-if vs. v-for 优先级

在 Vue 2 中： 当在同一元素上使用 v-if 和 v-for 时，v-for 会优先执行。

在 Vue 3 中： v-if 总是比 v-for 具有更高的优先级。

轻松搞定，将前端项目从Vue2迁移到Vue3(上）

1 Vue 3 新功能

1.1 组合 API

1.2 更好的类型支持

1.3 改进的虚拟

1.4 Fragments，又名多个根

1.5 Teleport

1.6 SFC 驱动的 CSS 变量（`<style>` 中的 `v-bind`）

2 Vue 3 已弃用和已删除的项目 ❌

2.1 过滤器

2.2 v-model

2.3 内联模板

2.4 命名和作用域插槽

2.5 全局 API 应用程序实例

2.6 关键属性

2.7 v-if vs. v-for 优先级

推荐书单

《 Vue.js 3企业级项目开发实战（微课视频版）》

精彩回顾

轻松搞定，将前端项目从Vue2迁移到Vue3(上）

1 Vue 3 新功能

1.1 组合 API

1.2 更好的类型支持

1.3 改进的虚拟

1.4 Fragments，又名多个根

1.5 Teleport

1.6 SFC 驱动的 CSS 变量（<style> 中的 v-bind）

2 Vue 3 已弃用和已删除的项目 ❌

2.1 过滤器

2.2 v-model

2.3 内联模板

2.4 命名和作用域插槽

2.5 全局 API 应用程序实例

2.6 关键属性

2.7 v-if vs. v-for 优先级

推荐书单

《 Vue.js 3企业级项目开发实战（微课视频版）》

精彩回顾

“相关推荐”对你有帮助么？

1.6 SFC 驱动的 CSS 变量（`<style>` 中的 `v-bind`）