vue2和vue3的区别

news/2025/3/5 9:39:52/

1.vue2vue3响应式原理不同
2.vue3支持碎片,vue不支持
3.vue3是组合式API,vue2是选项式API
4.v-if和v-for的优先级不同
5.生命周期不同
6.diff算法不同
7.vue3新增Teleport传送门组件、

1,vue2 vue3 响应式原理不同
vue2 的双向数据绑定是利用 ES5 的一个 APIObject.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
vue3 利用 Proxy 实现数据挟持,创建一个对象的代理,实现基本操作的拦截和自定义。
Object.defineProperty()存在的问题
在对一些属性进行操作时,使用这种方法无法拦截,比如通过下标方式修改数组数据或者给对象新增属性,这都不能触发组件的重新渲染,因为 Object.defineProperty 不能拦截到这些操作。更精确的来说,对于数组而言,大部分操作都是拦截不到的,只是 Vue 内部通过重写函数的方式解决了这个问题
2,vue3 支持碎片,vue 不支持
vue3 中组件的 template 下可以包含多个根节点, vue2 中组件的 template 下只能包含一个根节点
3,vue2 是选项式 API,vue3 是组合式 API
vue2 选项式 api 在代码里分割了不同得属性:data,methods,computed 等,同一块业务逻辑会把数据和方法拆分到不同的代码块中,开发式需要不断上下滚动代码,开发很不方便。
vue3 组合式 api 能让相同的业务的数据方法写在同一块代码区域,这样代码会更加简便和整洁
4,v-if 和 v-for 的优先级不同
vue2 v-for 优先于 v-if 生效
vue3 v-if 优先于 v-for 生效

5,生命周期的不同
vue2 -------> vue3

beforeCreate --------> setup(()=>{})
created --------> setup(()=>{})
beforeMount --------> onBeforeMount(()=>{})
mounted --------> onMounted(()=>{})
beforeUpdate --------> onBeforeUpdate(()=>{})
updated --------> onUpdated(()=>{})
beforeDestroy --------> onBeforeUnmount(()=>{})
destroyed --------> onUnmounted(()=>{})
activated --------> onActivated(()=>{})
deactivated --------> onDeactivated(()=>{})
errorCaptured --------> onErrorCaptured(()=>{})
6,diff算法不同
vue2 diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。vue2 diff算法会比较每一个vnode,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
vue3 diff算法在初始化的时候会给每个虚拟节点添加一个patchFlags,patchFlags就是优化的标识。只会比较patchFlags发生变化的vnode,进行更新视图,对于没有变化的元素做静态标记,在渲染的时候直接复用。


http://www.ppmy.cn/news/82355.html

相关文章

功能上新|内存篇:PSS显存、内存占用、堆内存对象快照

内存管理一直是游戏研发的重中之重,当项目运行时的内存压力较大时,更容易达到设备阈值引起闪退。近年来,当出海成为许多游戏公司新选择的同时,我们也发现海外设备对项目的内存情况有着更严格的要求。 为了帮助开发者更全面地了解…

Tomcat设置日志切割方案

要设置Tomcat日志切割,并区分不同类型的日志,你可以按照以下步骤进行配置: 打开Tomcat的配置文件 logging.properties,该文件通常位于Tomcat的 conf 目录下。 在文件中添加以下内容来定义不同类型的日志: # 运行日志…

数据仓库选择Greenplum还是SQL-on-Hadoop

Greenplum和Hadoop都是为了解决大数据并行计算而出现的技术,二者的相似点在于: 分布式存储数据在多个节点上。采用分布式并行计算框架。支持向外扩展来提高整体的计算能力和存储容量。支持X86开放集群架构。 但两种技术在数据存储和计算方法上&#xf…

公网对讲SDK——对讲应用场景

anyRTC 公网对讲 SDK的发布,解决了开发者想做公网对讲应用但没有技术的困境;SDK全平台支持的特性,让开发者可以在任何平台接入对讲能力;同时因为包体积小、对业务零入侵等特性被运用到各行各业中,下面咱们就来聊一聊公…

LeetCode 1080. 根到叶路径上的不足节点

【LetMeFly】1080.根到叶路径上的不足节点 力扣题目链接:https://leetcode.cn/problems/insufficient-nodes-in-root-to-leaf-paths/ 给定一棵二叉树的根 root,请你考虑它所有 从根到叶的路径:从根到任何叶的路径。(所谓一个叶子…

11.计算机基础-计算机网络面试题—基础知识

本文目录如下: 计算机基础-计算机网络 面试题一、基础知识简述 TCP 和 UDP 的区别?http 与 https的区别?Session 和 Cookie 有什么区别?详细描述一下 HTTP 访问一个网站的过程?https 是如何实现加密的?URL是什么&…

性能测试——性能统计工具

性能统计工具 一、io监控命令1、io监控命令iostat2、io指标监控命令df 二、cpu监控命令1、cpu指标监控命令uptime2、cpu指标监控命令 cat /proc/cpuinfo3、cpu 指标监控命令 mpstat4、cpu指标监控命令 sar 三、mem指标监控命令1、mem指标监控命令 cat /proc/meminfo2、mem指标监…

FL Studio水果软件好用吗?对电脑硬件环境有哪些需求

如果你打算将来朝着艺术和音乐方向发展,那么学习音乐理论和音乐制作就是一门基础课了。 实践才是检验学习效果途径,在我们日常的练习中,一款功能强大且易学的音乐制作工具是少不了的。在没有实际体验过各个音乐制作工具的功能前,…