前端学习之路(4) vue2和vue3的区别
一. 根节点不同
- vue2中必须要有根标签
- vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。
二. 组合式API和选项式API
- 在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。
- 在vue3中采用组合式API,将同一个功能的代码集中起来处理,使得代码更加有序,有利于代码的书写和维护。
三. 生命周期的变化
创建前:beforeCreate -> 使用setup()
创建后:created -> 使用setup()
挂载前:beforeMount -> onBeforeMount
挂载后:mounted -> onMounted
更新前:beforeUpdate -> onBeforeUpdate
更新后:updated -> onUpdated
销毁前:beforeDestroy -> onBeforeUnmount
销毁后:destroyed -> onUnmounted
异常捕获:errorCaptured -> onErrorCaptured
被激活:onActivated 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行。
切换:onDeactivated 比如从 A 组件,切换到 B 组件,A 组件消失时执行
四. v-if和v-for的优先级
- 在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费
- 在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层
五. diff算法不同
- vue2中的diff算法
- 遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。
- 用patch记录的消息去更新dom
- 缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
- 特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。
- vue3中的diff算法
- 在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。
- 只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。
六. 响应式原理不同
- vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。
- vue3通过proxy代理的方式实现。
- proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”,外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
- 当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升
七. 插槽方式不同
- 在vue2中
匿名插槽
子组件:
<div><slot></slot>
</div>父组件:
<child><span>我是插槽插入的内容</span>
</child>
具名插槽
子组件:
<div><slot name="person"></slot>
</div>父组件:
<child><span slot="person">我是插槽插入的内容</span>
</child>
作用域插槽:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。不过,我们可以在父组件中使用slot-scope 特性从子组件获取数据
<div><slot :data="data"></slot>
</div>
父组件:
<child><span slot-scope="data">我是插槽插入的内容</span>
</child>
- 在vue3中
匿名插槽:和在vue2中一样
具名插槽:
子组件:
<div><slot name="person"></slot>
</div>
父组件:
<child><template v-slot:person><span>我是插槽插入的内容</span></template>
</child>
作用域插槽:
子组件:
<div><slot :data="data"></slot>
</div>
父组件:
<child><span #data>我是插槽插入的内容</span> === <span #default="{data}">我是插槽插入的内容</span>
</child>
- 总结:
- 具名插槽使用方式不同:vue2使用slot=‘’,vue3使用v-slot:‘’
- 作用域插槽使用方式不同:vue2中在父组件中使用slot-scope=“data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default=”{data}"获取
八. 样式穿透
vue2中:
/deep/ .类名{}
::v-deep .类名{}
vue3中:
:deep (.类名{})
::v-deep(.类名{})
相关文章:
前端学习之路(4) vue2和vue3的区别
一. 根节点不同 vue2中必须要有根标签vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。 二. 组合式API和选项式API 在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当…...
网络原理-TCP/IP(5)
TCP协议 延迟应答 它也是基于滑动窗口,提高效率的一种机制,结合滑动窗口以及流量控制,能够以延迟应答ACK的方式,把反馈的窗口,搞大.核心在于允许范围内,让窗口尽可能大. 如果接收数据的主机立刻返回ACK应答,这时候返回的窗口可能比较小. 1.假设接收端缓冲区为1M.一次收到了5…...
Docker 常用命令详细介绍
Docker 是一个开源的应用容器引擎,它允许开发者打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。Docker 使用概率最高的命令…...
10G PON演进到50G PON
10G-PON是万兆无源光网络,光纤链路传输速率能够达到10Gbps。根据ZTE的报告称,截至2023年6月,全球10G PON出货量已超过3000万个PON端口,其中中国市场份额约占80%。 10G PON在中国市场的广泛部署,显着推进了10G PON产业链…...
智能指针——浅析
智能指针 本人不才,只能将智能指针介绍一下,无法结合线程进行深入探索 介绍及作用 在异常产生进行跳转时,通过栈帧回收进行内存释放,防止内存泄漏 基于RAII思想可以创建出只能指针 RAII(Resource Acquisition Is Initializatio…...
JAVA后端上传图片至企微临时素材
1.使用场景 在使用企业微信API接口中,往往开发者需要使用自定义的资源,比如发送本地图片消息,设置通讯录自定义头像等。 为了实现同一资源文件,一次上传可以多次使用,这里提供了素材管理接口:以media_id来…...
MySQL-----初识
一 SQL的基本概述 基本概述 ▶SQL全称: Structured Query Language,是结构化查询语言,用于访问和处理数据库的标准的计算机语言。SQL语言1974年由Boyce和Chamberlin提出,并首先在IBM公司研制的关系数据库系统SystemR上实现。 ▶美国国家标…...
[基础IO]文件描述符{重定向/perror/磁盘结构/inode/软硬链接}
文章目录 1. 再识重定向2.浅谈perror()3.初始文件系统4.软硬链接 1. 再识重定向 图解./sf > file.txt 2>&1 1中内容拷贝给2 使得2指向file 再学一个 把file的内容传给cat cat拿到后再给file2 2.浅谈perror() open()接口调用失败返回-1,并且错误码errno被适当的设置,…...
NAS系统折腾记 – Emby搭建家庭多媒体服务器
Emby简介 Emby是一款优秀的媒体服务器软件,致力于为用户提供丰富的多媒体体验。通过Emby,您可以方便地在家庭内的各种设备上观看您喜爱的电影、电视剧和其他视频内容。而且,Emby还具备强大的媒体管理功能,让您的影视资源井然有序…...
#从零开始# 在深度学习环境中,如何用 pycharm配置使用 pipenv 虚拟环境
为Python项目创建虚拟环境 在深度学习环境和一般python环境中安装pipenv基本一致,只需要确认好pipenv指定的python版本即可,安装pipenv前,可以通过python --version来确认安装版本 快捷键:crtl alt S 查看interpreter,查看所有…...
Cmake编译Opencv3.3.1遇到有些文件无法下载的错误解决:
前言: 对于,opencv有些配置文件错误并未致命,所以,有错误也不影响后续的编译:但是,后引用如果要用,在回过头来还是要解决的。 问题表述: 比如,有些文件下载的错误&am…...
Python基础知识:Python序列以及序列的索引、切片、相乘和相加
索引 索引就是序列中的每个元素所在的位置,可以通过从左往右的正数索引,也可以通过从右往左的负数索引。 从左往右的正数索引:在python序列中,第一个元素的索引值为0,第二个元素的索引值为1,以此类推&…...
回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测
回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测 目录 回归预测 | Matlab实现CPO-GRU【24年新算法】冠豪猪优化门控循环单元多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-GRU【24年新算法】冠豪猪优化…...
开源项目TARZAN-NAV | 基于springboot的现代化导航网站系统
TARZAN-NAV 导航网站 一个基于 Spring Boot、MyBatis-Plus、h2database、ehcache、Docker、websocket等技术栈实现的导航网站系统,采用主流的互联网技术架构、全新的UI设计、支持一键源码部署,拥有完整的仪表板、导航管理,用户管理、评论管理…...
SQL查询数据之多表(关联)查询
数据表: 关联查询主要分为:(inner join)交叉关联、(left join)左关联、(right join)右关联 (inner join)交叉关联: 定义:࿰…...
常见的web前端开发框架介绍
Web前端开发框架是为了简化网页设计和开发的流程而创建的工具集。它们提供了预定义的组件、工具和库,帮助开发者快速构建交互式的用户界面。以下是一些常见的Web前端开发框架,以及它们的原理、基础技术和应用场景的介绍: 1. React **…...
CSS 选择器与相关规则详解
CSS(Cascading Style Sheets)的选择器是网页样式设计中至关重要的工具,它们允许开发者精确地定位并应用样式到HTML文档中的元素。下面将逐一介绍几种主要的选择器类型,以及相关的注释和规则。 1. 类选择器 (Class Selector) 类选…...
基于springboot的宠物店系统的设计与实现
文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式 🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 &…...
Llama2大模型开源,大模型的Android时代来了?
就昨天凌晨,微软和Meta宣布Llama2大模型开源且进一步放开商用,一下朋友圈刷屏。要知道,开源界最强大的模型就是过去Meta开源的Llama,而现在Llama2更强大,又开放商用,更有微软大模型霸主企业撑腰(微软既投资大模型界的IOS——ChatGPT,又联合发布大模型的Android——Llam…...
取出list中指定数量数据操作,操作完了删除这些数据
直接看代码吧,有注释 package com.ep.crm.task;import java.util.ArrayList; import java.util.List; import java.util.Random;public class Test {public static void main(String[] args) {List<String> list new ArrayList<String>();// 生成随机整数Random …...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
