浅谈总结 vue2 到 vue3 的细节变更

本文详细介绍了Vue3的主要变化,包括v-for的ref使用、异步组件加载方式、attribute和$attrs的更新、$children的移除、自定义指令生命周期、新增的emits选项、$on等实例方法的变更、过滤器的移除、多根节点支持、keyattribute的调整、按键修饰符变化、$listeners的移除、prop默认函数的访问、过渡类名变更、v-on.native移除、v-model行为变化、v-if/v-for优先级调整、v-bind渲染顺序影响、组件生命周期事件监听变化、watch监听数组的处理及watchEffect的引入。这些变化对于Vue3开发者至关重要,理解并掌握它们能帮助顺利完成项目迁移。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、v-for的ref数组。

现在vue3 可以直接 :ref绑定一个函数,其参数就是 el 节点,也就是dom节点,然后便可以定义 push 。
在这里插入图片描述
在这里插入图片描述

2、异步组件的加载

现在vue3需要使用 defineAsyncComponent 包裹

const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

在这里插入图片描述

3、attribute的变更。

我们可以简单的把vue3的这个attribut变更理解为
:attr=’ ’ 当使用一个动态属性时,直接设置为空在节点上是不会移除这个属性的 我们只有设置成undefined、null才会移除
而我们平常去设置false也不会移除而是会显示false
在这里插入图片描述

4、$attrs 的变更。

$attrs现在包裹所有的 atrribute,其中也包括着 class 和 style。
在这里插入图片描述

5、$children的变更。

在vue3当中,$children 已经被移除。如果要访问子组件,可以使用 $refs
在这里插入图片描述

6、vue自定义指令的变化。

vue3当中 自定义指令的生命周期钩子已经进行了变化
从5个钩子变为了7个钩子
在这里插入图片描述

7、新增emits选项。

vue3 目前提供一个emits选项,和现有的props选项类似,这个选项可以用来定义组件可以向其父组件触发的事件,需要知道的是,任何没有声明emits的事件监听器都会被算入组件的$attrs并绑定在组件的根节点上面。
在这里插入图片描述
在这里插入图片描述

8、$on、 $off、 $once 实例方法的变更。

vue3,$on、 $off、 $once 实例方法已经被移除。
在这里插入图片描述

9、filter过滤器的变更。

从 Vue 3.0 开始,过滤器已删除,不再支持。
在这里插入图片描述

10、vue3片段变更,支持多根节点。

vue3 现在支持多个根节点,但是多个根节点继承的话需要绑定 $attrs ,因为现在已经不在具有隐式贯穿的行为。
在这里插入图片描述
在这里插入图片描述

11、key attribute的变更。

vue2 建议在 v-if / v-else / v-else-if 的分支中使用key vue3 则不再需要,vue3 <template>,for 循环 key 则应该设置在 <template>标签上,原来是设置在子元素上面的
在这里插入图片描述

12、vue3 按键修饰符的变更。

vue3 按键修饰符不再支持键码作为v-on的修饰符,如有需要请走事件对象 $event ,或者直接用对应的英文字母即可实现键盘码修饰符

在这里插入图片描述
在这里插入图片描述

13、vue3 移除 $listeners。

vue3 移除了 $listeners,封装进了 $attrs中。
在这里插入图片描述

14、在 prop 的默认函数中访问this。

可以再props的 default 中使用 inject 函数
在这里插入图片描述

15、过渡的class类名变更。

过渡的class类名变更,v-enter修改为v-enter-from,v-leave修改为v-leave-from
在这里插入图片描述

16、移除了v-on.native修饰符。

vue3 移除了v-on.native 修饰符,触发可用emits对象暴露
在这里插入图片描述
在这里插入图片描述

17、v-model绑定行为的变换。

vue2:v-model相当于 :value 和 @input 的语法糖
vue3:v-model相当于 :modelValue 和 @update:modelValue 的语法糖

如果要变更子组件的触发行为
则 v-model:title=“xxx” 就会变为 :title 和 @update:title 的语法糖

现在 vue3 在一个组件上可以同时绑定多个 v-model
在这里插入图片描述
在这里插入图片描述

18、v-if和v-for的优先级问题。

vue2 在同一元素上 v-for的优先级是要比v-if的优先级高的,
vue3 在同一元素上 v-for的优先级是要比v-if的优先级低的。
如果想要 v-for比v-if的优先级高可以 v-for 外层包裹的<template>
在这里插入图片描述

19、v-bind的绑定顺序会影响渲染结果。

<div id="red" v-bind="{id:'blue'}"></div>

vue2渲染结果展示的是 id=‘red’,
vue3渲染结果展示的是 id=‘blue’,

vue3 变为了那个在后显示那个
在这里插入图片描述

20、原有的组件侦听生命周期绑定事件变更。

vue2时如果想要侦听一个组件的生命周期
@hook:mounted
vue3时如果想要侦听一个组件的生命周期
@vnode-mounted / @vnodeMounted

在这里插入图片描述

21、watch监听数组。

vue3当中,如果想要监听数组内容的变化那么必须要写deep。
在这里插入图片描述

22、新增watchEffect。

简单的理解,可以将它理解成是一个computed,只不过它会在初始化的时候执行一次,其内部回调的第一个参数就是onInvalidate,这个参数主要用于清除副作用,这个onInvalidate会在watchEffect重新运行或者停止运行的时候执行。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值