如何丝滑的从Vue2向Vue3的过渡(上篇)

Vue3的到来开启了一系列增强和突破性功能的新时代。从Vue2到Vue3的这一进化步骤为开发者提供了一系列机会,能够让我们站在Web开发趋势的前沿,充分发挥这个卓越框架的潜力。今天我将与大家分享,Vue3带来的宏伟进步。在迁移过程中如何处理已弃用和被淘汰的部分,以及如何丝滑的从Vue2向Vue3过渡。

Vue3的新特性都有哪些呢?

1. Composition API(组合式API)


组合式API提供了一种灵活的方式来组织组件逻辑,更易于通过更好的类型检查在组件之间重用代码。与选项式API相比,组合式API更易于维护。

2. 更好的类型支持

Vue3的代码基于TypeScript完全编写,具有自动生成的类型定义。它具有更好的类型推断和对TypeScript的可选链和空值合并运算符的支持。

3.改进的虚拟DOM算法,多根节点

Vue3中的虚拟DOM已经完全重新设计。它利用了一个新的差异算法,并通过基于编译器的优化加速渲染过程。 在Vue3中,我们可以为单个组件创建多个根节点,而在Vue2中这是不可行的。

4.传送门(Teleport)

<Teleport> 是一个内置组件,允许我们将组件模板的一部分"传送"到存在于该组件的DOM层次结构之外的DOM节点中。<Teleport>to 属性期望一个CSS选择器字符串或一个实际的DOM节点。当<Teleport> 组件被挂载时,传送到目标的节点必须已经存在于DOM中。如下面代码所示:

这段代码使用了Vue3的组件 <demo-component> 包含了一个 <teleport> 组件,而 <teleport> 又包裹了一个名为 <pop-up> 的子组件。这段代码的主要目的是将 <pop-up> 组件的内容传送(teleport)到页面中具有 id="teleport-area" 的 DOM 节点内。

Vue 3已弃用和移除的内容

Filters:

在Vue 3中,已移除Filters。相反,我们可以使用方法或计算属性。您可以参考下面的示例:

vue2中的filters函数

Vue3使用计算属性进行了替换

v-model

在Vue 3中,v-model的prop和事件默认名称已更改:

  • PROP: value ⟶ modelValue;
  • EVENT: input ⟶ update:modelValue;
  • 破坏性的变更: v-bind的.sync修饰符和组件模型选项已被移除,用v-model上的参数替代
  • 新增: 可以在同一组件上进行多个v-model绑定 ;创建自定义v-model修饰符的能力

Vue2中的v-model

Vue3中V-model

作用域插槽

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

Vue2 slot的使用

Vue3 slot的使用

Key属性

Vue3 在v-if/v-else/v-else-if分支上不再需要key,因为Vue现在会自动生成唯一的key。 在<template v-for>上的key应该放在<template>标签上(而不是其子元素上)。

v-if与v-for的优先级

  • 在Vue 2中: 在同一个元素上同时使用v-if和v-for时,v-for会优先于v-if。
  • 在Vue 3中: v-if将始终优先于v-for。

以上是今天的分享内容,由于篇幅太长的原因,下一篇将继续分享 如何丝滑的从Vue2向Vue3过渡。如果你感兴趣,欢迎评论 点赞和收藏!

相关推荐
华仔啊24 分钟前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
ttod_qzstudio32 分钟前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
通往曙光的路上33 分钟前
day9_elementPlus2
javascript·vue.js·elementui
一只小风华~35 分钟前
Vue Router 的三种历史模式详解
前端·javascript·vue.js·笔记·学习·前端框架·ecmascript
前端_Coder38 分钟前
Vue 3 watch 与 watchEffect ,哪个更好?
前端·vue.js·前端框架
一只小风华~39 分钟前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html
龙仔CLL2 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
reembarkation3 小时前
vue 右键菜单的实现
前端·javascript·vue.js
2301_7683502310 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:11 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf