vue2.29-Vue3跟vue2的区别

news2024/12/25 12:41:22

1、vue3介绍
更新(和重写)Vue的主要版本时,主要考虑两点因素:首先是新的JavaScript语言特性在主流浏览器中的受支持水平;其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题。
相较于vue2,vue3
利用新的语言特性(es6)
解决架构问题

2、哪些变化
在这里插入图片描述
从上图可以知道,可以知道vue3新特性,如下:
速度更快
体积减少
更易维护
更接近原生
更易使用

速度更快:
vue3相较于vue2
重写了虚拟dom实现
编译模板的优化
更高效的组件初始化
update性能提高了1.3-2倍
ssr速度提高了2-3倍
在这里插入图片描述
体积更小
通过webpack和tree-shaking功能,可以将无用模板”剪辑“,仅打包需要的。
通过tree-shaking,有两大好处
对开发人员,能够对vue实现更多其他的功能,而不必担忧整体体积过大。
对使用者,打包出来的包体积变小了。
vue可以开发出更多其他的功能,而不必担忧vue打包出来的整体体积过多
在这里插入图片描述
更易维护:
composition API:
可与现有的Options API一起使用
灵活的逻辑组合和复用
vue3模块可以跟其他框架搭配使用
在这里插入图片描述
更好的Typescript支持
vue3是基于Typescript编写的,可以享受到自动的类型定义提示。
在这里插入图片描述
编译器重写
在这里插入图片描述
更接近原生
可以自定义渲染API

在这里插入图片描述
更易使用
响应式API暴露出来
在这里插入图片描述
轻松识别组件重新渲染原因
在这里插入图片描述

3、vue3新增特性
vue3中需要关注的一些新功能,包括:
framents
Teleport
composition API
createRenderer
framents
在vue3.x中,组件现在支持有多个根节点
在这里插入图片描述

Teleport:
Teleport是一种能够将我们的模板移动到Dom中vue app之外的其他位置的技术,有点像哆啦A梦的”任意门“
在vue2中,像modals,toast等这样的元素,如果我们嵌套在vue的某个组件内部,那么处理嵌套组件的定位,z-index和样式会变得很困难。
通过Teleport,可以在组件的逻辑位置写模板代码,然后再vue应用范围之外渲染它。
在这里插入图片描述
createRenderer:
通过createRenderer,能够构建自定义渲染器,能够将vue的开发模型拓展到其他平台。例如可以将其生成在canvas画布上。
在这里插入图片描述

composition API:
composition API也是组合式api,通过这种形式,能够更加容易地维护我们的代码,将相同功能的变量进行一个集中式的管理。
在这里插入图片描述
关于composition api的使用,这里以下图展开:
在这里插入图片描述
简单使用:
在这里插入图片描述

非兼容变更

Global Api
全局vue api已更改为使用应用程序实例
全局和局部api已经被重构为可tree-shakeable

模板指令
组件上v-model用法已更改
和非v-for节点上的key用法已更改
在同一元素上使用的v-if和v-for优先级已经更改
v-bind=”object“现在排序敏感
v-for中ref不再注册ref数组

组件:
只能使用普通函数创建功能组件
funcational属性在单文件组件(SFC)
异步组件现在需要defineAsyncComponent方法来创建

渲染函数:
渲染函数api改变
s c o p e d S l o t s p r o p e r t y 已删除,所有插槽都通过 scopedSlots property已删除,所有插槽都通过 scopedSlotsproperty已删除,所有插槽都通过slots作为函数暴露
自定义指令api已更改为与组件生命周期一致
一些转换class被重命名
v-enter->v-enter-from
v-leave->v-leave-form
组件watch选项和实例方法$watch不再支持点分隔字符串路径,请改用计算函数作为参数
在vue2.x中,应用根容器outerHTML将替换为根组件模板(如果根组件没有模板/渲染选项,则最终编译为模板)。vue3.x现在使用应用程序容器的innerHTML

其他改变:
destoryed生命周期选项被重命名为unmounted
beforeDestory 生命周期选项被重命名为beforeUnmount
[prop default]不再有权访问this是上下文
自定义指令API已更改为与组件生命周期一致
data1应始终声明为函数
来自mixin的data选项现在可简单的合并
attribute强制策略已更改
一些过渡class被重命名
组件watch选项和实例方法,$watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
没有特殊指令的印记(v-if/else-if/else、v-for、或v-slot)现在被视为普通元素,并将生成原生的元素,而不是渲染其内部内容。
在vue2.x中,应用根容器的outerHTML将替换为根组件模板(如果根组件没有模板/渲染选项,则最终编译为模板)。vue3.x现在使用应用容器的innerHTML,这意味着容器本身不再被视为模板的一部分。

移除API
keyCode支持作为v-on的修饰符
o n , on, onoff和$once实例方法
过滤filter
内联模板attribute
$destory实例方法。用户不应在手动管理单个vue组件的生命周期

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/842745.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

从零开始打造你的书店小程序商城

随着互联网的发展,线上商城成为了书店经营的重要方式之一。如何快速搭建一个符合书店特点的小程序商城呢?下面将为您详细介绍利用乔拓云平台搭建一个符合书店特点的小程序商城的步骤。 首先,登录乔拓云平台,进入商城后台管理页面。…

uniapp两个单页面之间进行传参

1.单页面传参:A --> B url: .....?code JSON.stringify(param), 2.单页面传参B–>Auni.$emit() uni.$on()

Aspose.Imaging for Python via .NET Crack

Aspose.Imaging for Python via .NET Crack Aspose.Imaging for Python via.NET是一个提供高级图像处理功能的库。您可以使用此API轻松创建、加载、操作、转换或压缩图像。另外,Aspose.Imaging for Python通过.NET支持绘图和使用图形基元。图像导出和转换-API的核心…

使用XMLHttpRequest实现文件异步下载

1、问题描述 我想通过异步的方式实现下载文化&#xff0c;请求为post请求。一开始我打算用ajax。 $.ajax({type:post,contentType:application/json,url:http://xxx/downloadExcel,data:{data:JSON.stringify(<%oJsonResponse.JSONoutput()%>)},}).success(function(dat…

旅游系统开源

线上旅游电子商务系统 适用业务场景&#xff1a; 线路、酒店、门票、租车、邮轮、导游、团购、签证、特产、户外、商城等。 支持B2C\B2B2C\B2B业务&#xff0c;支持微信公会号、微信小程序、PC端等等。 源码介绍&#xff1a; 1、采用WEB软件应用最广泛的PHPMYSQL语言 采用B…

4大软件测试策略的特点和区别(单元测试、集成测试、确认测试和系统测试)

四大软件测试策略分别是单元测试、集成测试、确认测试和系统测试。 一、单元测试 单元测试也称为模块测试&#xff0c;它针对软件中的最小单元&#xff08;如函数、方法、类、模块等&#xff09;进行测试&#xff0c;以验证其是否符合预期的行为和结果。单元测试通常由开发人…

单例模式(C++)

定义 保证一个类仅有一个实例&#xff0c;并提供一个该实例的全局访问点。 应用场景 在软件系统中&#xff0c;经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例&#xff0c;才能确保它们的逻辑正确性、以及良好的效率。如何绕过常规的构造器&#xff0c;提供一种…

【Docker】Docker私有仓库的使用

目录 一、搭建私有仓库 二、上传镜像到私有仓库 三、从私有仓库拉取镜像 一、搭建私有仓库 首先我们需要拉取仓库的镜像 docker pull registry 然后创建私有仓库容器 docker run -it --namereg -p 5000:5000 registry 这个时候我们可以打开浏览器访问5000端口看是否成功&…

zookeeper和kafka

目录 一、zookeeper理论 1.1、zookeeper定义 1.2、zookeeper工作机制 1.3、zookeeper特点 1.4、zookeeper的数据结构 1.5、zookeeper应用场景 1.6、zookeeper的选举机制 二、部署Zookeeper 集群 2.1、环境准备 2.2、安装 Zookeeper 2.3、修改配置文件 2.4、配置…

编写第一个 React Native 程序

React Native 目录 使用React Native CLI命令创建的目录如下图所示&#xff1a; 重要目录说明 目录说明__tests__存放测试用例的目录.bundle / config配置文件&#xff08;一般不会用到&#xff09;android 和 IOS 文件夹这两个文件夹主要是存放安卓和 ios 相关的配置文件和…

ESP32学习笔记(52)————三轴加速度ADXL345使用(SPI方式)

一、简介 ADXL345 是一款 ADI 公司推出的基于 iMEMS 技术的超低功耗3轴加速度计&#xff0c;分辨率高(13位)&#xff0c;测量范围达 16g。数字输出数据为 16 位二进制补码格式&#xff0c;可通过 SPI(3线或4线) 或 I2C 数字接口访问。ADXL345 非常适合移动设备应用。它可以在倾…

小研究 - MySQL 分区技术在海量系统日志中的应用

随着信息技术的飞速发展&#xff0c;系统的业务功能不断扩大&#xff0c;产生的日志与日俱增&#xff0c;导致应用软件的运行速度越来越慢&#xff0c;不能很好地满足用户对软件性能的需求。基于此&#xff0c;重点研究了 MySQL 分区技术在大数据量软件日志中的应用&#xff0c…

NamedParameterJdbcTemplate类的作用和使用

NamedParameterJdbcTemplate是Spring框架提供的一个类&#xff0c;用于简化在JDBC操作中使用命名参数的过程。它是对JdbcTemplate的扩展&#xff0c;通过使用命名参数而不是传统的问号占位符&#xff0c;使SQL语句更易读和维护。 NamedParameterJdbcTemplate的作用是&#xff…

cn.hutool.core.date.DateUtil.beginOfDay 方法的作用和使用

cn.hutool.core.date.DateUtil.beginOfDay 方法的作用是返回指定日期的开始时间&#xff0c;即将时、分、秒和毫秒部分设置为 0。 使用 beginOfDay 方法时&#xff0c;可以按照以下步骤进行操作&#xff1a; 导入 cn.hutool.core.date.DateUtil 类。创建一个 java.util.Date …

PPS Tester测量原理和实施方法

怿星科技发布了新品PPS Tester&#xff0c;这是一款基于1PPS方法的时间同步精度测试设备。PPS Tester由硬件模块ETS2110和上位机软件ePPSTester构成。本文将围绕此设备的应用场景&#xff0c;介绍相关概念和设备使用方法。 什么是时间同步&#xff1f; 时间同步就是采取某项技…

涂鸦智能获Matter Non-VID Scoped PAA资质 助力开发者拥抱Matter生态

今年5月&#xff0c;全球化IoT开发者平台涂鸦智能&#xff08;NYSE: TUYA&#xff0c;HKEX: 2391&#xff09;正式生成Tuya Matter PAA密钥根&#xff0c;并于7月&#xff0c;成功通过了连接标准联盟和第三方MA机构审查而上线。自此&#xff0c;涂鸦正式成为全球同时提供支持Ma…

考研算法38天:反序输出 【字符串的翻转】

题目 题目收获 很简单的一道题&#xff0c;但是还是有收获的&#xff0c;我发现我连scanf的字符串输入都忘记咋用了。。。。。我一开始写的 #include <iostream> #include <cstring> using namespace std;void deserve(string &str){int n str.size();int…

STM32 HAL 驱动PM2.5传感器(GP2Y10AU气体检测模块)

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 ADC外设配置 2.3 串口外设配置 2.4 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 ADC数据采集 3.3 主函数代 3.4 效果展示 1、简介 本文通过STM32F103C8T6单片机通过HAL库方式对G…

Java实现Google cloud storage 文件上传,Google oss

storage 控制台位置 创建一个bucket 点进bucket里面&#xff0c;权限配置里&#xff0c;公开访问&#xff0c;在互联网上公开&#xff0c;需要配置角色权限 新增一个访问权限 &#xff0c;账号这里可以模糊搜索&#xff0c; 角色配置 给allUser配置俩角色就可以出现 在互联…

文水爱心帮扶开展——情系困境 高温天里“送关爱”

为了困境儿童有个健康、快乐、平等、和谐的成长环境&#xff0c;在社会组织党委的领导下&#xff0c;文水县妇联、县爱心帮扶志愿者协会及中志协应急委文水服务队联合开展新时代文明实践活动--为困境儿童送关爱。 8月6日上午九点&#xff0c;在文水火车站广场&#xff0c;文水县…