浅谈vue2.0与vue3.0的区别(整理十六点)
目录
1. 实现数据响应式的原理不同
2. 生命周期不同
3. vue 2.0 采用了 option 选项式 API,vue 3.0 采用了 composition 组合式 API
4. 新特性编译宏
5. 父子组件间双向数据绑定 v-model 不同
6. v-for 和 v-if 优先级不同
7. 使用的 diff 算法不同
8. 兄弟组件间的通信 eventBus
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
11. 获取 DOM 的方法不同
12. vue-router 的使用细节
13. vuex 与 pinia
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
16. 语法细节的不同
写在最后:
1. 实现数据响应式的原理不同
① vue 2.0:
- 通过 es5 的语法 Object.defineProperty(),数据劫持的方式实现数据的响应式。
② vue 3.0:
- 通过 Proxy 代理对象的方式实现数据的响应式。
- 因此,又多了一些定义响应式数据的方法,如 ref、reactive、roRef、toRefs。
- ref:接收简单类型或者对象类型的数据传入并返回一个响应式的对象。(RefImpl)修改值,获取值的时候,需要.value。
- reactive:接受对象类型数据的参数传入并返回一个代理响应式的对象。(Proxy)
- toRef:转换响应式对象中某个属性为单独响应式数据,并且值是关联的。
- toRefs:转换响应式对象中所有属性为单独响应式数据,并且值是关联的。
2. 生命周期不同
① vue 2.0 一共 10 个生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated:keep-alive 组件缓存技术,激活
- deactivated:keep-alive 组件缓存技术,未激活
- beforeDestroy
- destroyed
② vue 3.0 一共 7 个生命周期
- setup
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
总结:
- 废弃了 activated、deactivated 生命周期函数。
- setup 函数是整个组件的起点,执行时机在 beforeCreate 之前,所以没有办法拿到当前组件实例 this。
- 但是 setup 函数里可以接收两个形参 props 和 context。
- props 为属性
- context 为当前组件实例,也是就相当于vue 2.0 中的 this。
- vue 3.0 中的生命周期函数使用函数调用的方式执行,所以可以多次调用执行。
3. vue 2.0 采用了 option 选项式 API,vue 3.0 采用了 composition 组合式 API
① option API
- 数据定义在 data 里,属性定义在 props 里,计算属性定义在 computed 里,方法定义在 methods 里。
- 相较于 vue 3.0 则更易于学习和使用。
② composition API
- 一个功能逻辑的代码组合在一起。
- 相较于 vue 2.0 更易于阅读和维护。
小插曲,谈一谈自己对于 vue 2.0 和 vue 3.0 的选项式 API 和组合式 API 的理解:
vue 3.0 是在 2020 年 10 月发布的。由于写 vue 2.0 的时间比较早,所以当时在转入 vue 3.0 的时候,并没有花太多时间。感受最深的一点就是,在 vue 3.0 中无法使用 this,前文已经谈过 this 的问题,在这里不再赘述。而 vue 3.0 也可以分为两个版本,vue 3.3 以下的版本,其实感觉还是 option API 的写法,因为在 setup 函数平级的节点中,依然可以定义 props 和 components 节点,只不过是把数据和方法定义在 setup 函数里,然后通过 return 出来使用。

在 vue 3.3 及 3.3 以上的版本中,引入了 <script setup> 语法糖。此时,props 和 components 这些节点就不存在了,setup 函数也没有 return 了,那么为了使用 props 和 context 等,又提供了一些新的编译宏。

4. 新特性编译宏
常用的编译宏如下:
- defineProps:定义属性
-
defineEmits:定义自定义的事件的触发
-
defineExpose:向外暴露组件的属性和方法
-
在非语法糖的写法中,通过 setup 函数的 return 出来了属性和方法,所以无须使用defineExpose
-
-
defineOptions:向外暴露组件的一些自定义属性,如 name
-
defineModel:vue 3.0 中父子组件间的双向数据绑定
-
const modelValue = defineModel()
-
5. 父子组件间双向数据绑定 v-model 不同
① vue 2.0:
- 父组件默认传递的属性是 value,子组件默认触发的自定义事件是 input
② vue 3.0:
- 父组件默认传递的属性是 modelValue,子组件默认触发的自定义事件是 update:modelValue
6. v-for 和 v-if 优先级不同
- vue 2.0 中 v-for 的优先级高
- vue 3.0 中 v-if 的优先级高
7. 使用的 diff 算法不同
① vue 2.0
- 同级比较,根元素变化,整个 dom 树删除重建
- 根元素未变
- 属性改变,更新属性
- 子元素内容改变
- 无 key 就地更新
- 有 key 按 key 比较
② vue 3.0
- 将静态节点与动态节点分离
- 通过高效标记和打补丁的方式,更新 dom
总结:
- 所以 vue 3.0 的渲染性能优于 vue 2.0
8. 兄弟组件间的通信 eventBus
- vue 2.0 中的 eventBus 是一个 vue 的实例对象
- vue 3.0 中的eventBus 是 mitt 库
9. vue 3.0 提供了 TypeScript 支持
10. 脚手架不同
- vue 2.0 的打包工具是 webpack
- vue 3.0 的打包工具是 vite
11. 获取 DOM 的方法不同
- vue 2.0 直接绑定 ref,使用 this.ref.属性名的方式直接获取
- vue 3.0 需要先定义 const box = ref(null),再进行绑定
12. vue-router 的使用细节
① vue 2.0
- 通过 this.$router 和 this.$route 拿到全局的路由对象和当前的路由对象
- 路由前置守卫
- to: 即将要进入的目标 路由对象
- from:当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 放行路由跳转
- next(false):拦截路由跳转
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...
})
② vue 3.0
- 通过 const router = useRouter() 和 const route = useRoute() 拿到全局的路由对象和当前的路由对象
- 路由前置守卫
- 少了 next
- return false 拦截回 from 的地址页面
-
return undefined / true 直接放行
const router = createRouter({ ... })router.beforeEach((to, from) => {// ...// 返回 false 以取消导航return false
})
13. vuex 与 pinia
① vue 2.0 vuex
- state 定义数据
- mutations 执行同步代码,修改 state 中的数据必须通过 mutations,在组件中通过 commit 提交 mutation 的方式
- actions 执行异步操作,在组件中通过中通过 dispatch 派遣 action 的方式
- getters 类似于 computed 计算属性或者过滤器
- modules 模块化
② vue 3.0 pinia
- 将 mutations 和 actions 合二为一,不在区分同步和异步操作,去掉了 modules 模块化的概念,每一个 store 都是一个独立的模块
- 提供了丰富的插件配置及配置对象,如在实现数据本地持久化上,可以通过插件直接配置 persist: true就可以直接实现。
- 当时写 vue 2.0 的项目,记得是自己封装了一个 get、set 操作 localstorage 的方法去实现本地数据的持久化
14. vue 3.0 废除了 filters 过滤器的使用
15. template 模版中根标签的问题
- vue 2.0 中必须有一个根标签元素,vue 3.0 则不用
16. 语法细节的不同
- 此外就是一些语法上的使用细节,不做深入比较阐述了。
- 如:vue 3.0 一般是通过 Createxxx 创建实例
- CreateApp 创建 vue 实例
- CreateRouter 创建路由对象
- CreatePinia 创建 pinia
写在最后:
个人实际开发中,使用下来感受到的区别和不同点,欢迎大佬们修正与补充。借用人民日报今年的广告语,“请你努力,为了你自己。”
相关文章:
浅谈vue2.0与vue3.0的区别(整理十六点)
目录 1. 实现数据响应式的原理不同 2. 生命周期不同 3. vue 2.0 采用了 option 选项式 API,vue 3.0 采用了 composition 组合式 API 4. 新特性编译宏 5. 父子组件间双向数据绑定 v-model 不同 6. v-for 和 v-if 优先级不同 7. 使用的 diff 算法不同 8. 兄弟组…...
深入理解 MySQL MVCC:多版本并发控制的核心机制
在数据库领域,并发控制是确保多个事务能够正确地并发执行而不破坏数据完整性的关键技术。MySQL 作为广泛使用的关系型数据库管理系统,采用了多版本并发控制(Multi-Version Concurrency Control,MVCC)机制来实现高效的并…...
Qt6编译达梦8数据库驱动插件
一、编译环境 操作系统:deepin V23 Qt版本: Qt 6.7.2 编译器:gcc/g version 12.3.0,cmake 3.28.3 达梦数据库:开发版V8 二、下载达梦QT接口源码 下载链接: https://eco.dameng.com/downlo…...
什么是机器学习力场
机器学习力场(Machine Learning Force Fields, MLFF)方法是一类将机器学习技术应用于分子动力学(Molecular Dynamics, MD)模拟的技术。它通过使用机器学习算法拟合原子之间的相互作用能量和力场,使得在不牺牲精度的前提…...
USB组合设备——串口+鼠标+键盘
文章目录 USB组合设备——串口+鼠标+键盘描述符结构设备描述符配置描述符集合配置描述符接口关联描述符键盘接口描述符鼠标接口描述符类特殊命令CDC 的类特殊命令HID 的类特殊命令接口 2接口3USB组合设备——串口+鼠标+键盘 描述符结构 设备描述符 配置描述符 接口关联描述符…...
python学习——对无人机影像有RGB转换到HSV
问题描述 最近需要对无人机影像中绿色植被信息进行提取,查看相关论文,发现用的比较多的就是HSV色彩转换方法,动手实践一下。 解决思路 #mermaid-svg-5ejGodIusPv6zFVS {font-family:"trebuchet ms",verdana,arial,sans-serif;fon…...
【南方科技大学】CS315 Computer Security 【Lab2 Buffer Overflow】
目录 引言软件要求启动虚拟机环境设置禁用地址空间布局随机化(ASLR)设置编译器标志以禁用安全功能 概述BOF.ctestShellCode.c解释 createBadfile.c 开始利用漏洞在堆栈上查找返回地址 实验2的作业 之前有写过一个 博客,大家可以先看看栈溢出…...
持续集成与持续交付CI/CD
CI/CD 是指持续集成(Continuous Integration)和持续部署(Continuous Deployment)或持续交付(Continuous Delivery) 持续集成(Continuous Integration) 持续集成是一种软件开发实践&…...
C++学习笔记之变量作用域
C学习笔记之变量作用域 https://www.runoob.com/cplusplus/cpp-variable-scope.html 在C程序中,通常有 3 个地方可以声明变量 在函数或者代码块当中,为局部变量在函数的参数定义中,为形式参数在所有函数的外部,为全局变量 作用域…...
解决跨境电商平台账号无法访问的常见问题
跨境电商的迅猛发展,越来越多的卖家选择在全球各大电商平台如亚马逊、eBay等进行商品销售。然而,在实际运营过程中,卖家经常会遇到账号无法访问、应用打不开等问题,导致业务受阻。本文将针对这些问题进行详细分析,并提…...
P2847 [USACO16DEC] Moocast G
P2847 [USACO16DEC] Moocast G [USACO16DEC] Moocast G 题面翻译 Farmer John 的 N N N 头牛 ( 1 ≤ N ≤ 1000 1 \leq N \leq 1000 1≤N≤1000) 为了在他们之间传播信息,想要组织一个"哞哞广播"系统。奶牛们决定去用步话机装备自己而不是在很远的距离…...
针对国内AIGC市场,国内目前出台了那些法律法规?
针对国内AIGC市场,特别是AI生成与合成内容方面,中国已经出台了一系列法律法规来规范其发展和应用。 图片源自“央视新闻” 以下是一些主要的法律法规: 一、国家层面的法律法规 《中华人民共和国网络安全法》 施行时间:2017年6月…...
Windows+Ubuntu双系统下时钟设置
Ubuntu默认把系统时间(硬件时钟)设置为UTC时间,并根据本地时区和夏令时设置自动调整本地时间,这是一种很合理很优雅的处理硬件时钟和本地时钟的模式。而Windows系统是默认情况下把系统时间设置为本地时间,历来独霸电脑…...
一些写leetcode的笔记
标准库中的string类没有实现像C#和Java中string类的split函数,所以想要分割字符串的时候需要我们自己手动实现。但是有了stringstream类就可以很容易的实现,stringstream默认遇到空格、tab、回车换行会停止字节流输出。 #include <sstream> #incl…...
shopify主题开发之template模板解析
在 Shopify 主题开发中,template 文件是核心部分,它们定义了店铺中不同页面的布局和结构。下面将详细介绍 Shopify 主题中的 template 模板。 一、template 文件结构 在 Shopify 主题中,templates 文件夹包含了所有用于生成店铺页面的模板文…...
Zookeeper学习
文章目录 学习第 1 章 Zookeeper 入门1.1 概述Zookeeper工作机制 1.2 特点1.3 数据结构1.4 应用场景统一命名服务统一配置管理统一集群管理服务器动态上下线软负载均衡 1.5 下载zookeeper 第 2 章 Zookeeper 本地安装2.1 本地模式安装安装前准备配置修改操作 Zookeeper本地安装…...
FAT32文件系统详细分析 (格式化SD nandSD卡)
FAT32 文件系统详细分析 (格式化 SD nand/SD 卡) 目录 FAT32 文件系统详细分析 (格式化 SD nand/SD 卡)1. 前言2.格式化 SD nand/SD 卡3.FAT32 文件系统分析3.1 保留区分析3.1.1 BPB(BIOS Parameter Block) 及 BS 区分析3.1.2 FSInfo 结构扇区分析3.1.3 引导扇区剩余扇区3.1.4 …...
通义灵码在Visual Studio上
通义灵码在Visual Studio上不好用,有时候会出现重影,不如原生的自动补全好用,原生的毕竟的根据语法来给出提示的。...
基于SpringBoot的招生宣传管理系统【附源码】
基于SpringBoot的招生宣传管理系统(源码L文说明文档) 目录 4 系统设计 4.1 系统概述 4.2系统功能结构设计 4.3数据库设计 4.3.1数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1管理员功能介绍 5.1.1管理员登录 …...
SOT23封装1A电流LDO具有使能功能的 1A、低 IQ、高精度、低压降稳压器系列TLV757P
前言 SOT23-5封装的外形和丝印 该LDO适合PCB空间较小的场合使用,多数SOT23封装的 LDO输出电流不超过0.5A。建议使用时输入串联二极管1N4001,PCB布局需要考虑散热,参考文末PCB布局。 1 特性 • 采用 SOT-23 (DYD) 封装,具有 60.3C/W RθJA •…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...
图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...
2.3 物理层设备
在这个视频中,我们要学习工作在物理层的两种网络设备,分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间,需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质,假设A节点要给…...
DeepSeek越强,Kimi越慌?
被DeepSeek吊打的Kimi,还有多少人在用? 去年,月之暗面创始人杨植麟别提有多风光了。90后清华学霸,国产大模型六小虎之一,手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水,单月光是投流就花费2个亿。 疯…...
