前端学习之路(4) vue2和vue3的区别

一. 根节点不同

  1. vue2中必须要有根标签
  2. vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存。

二. 组合式API和选项式API

  1. 在vue2中采用选项式API,将数据和函数集中起来处理,将功能点切割了当逻辑复杂的时候不利于代码阅读。
  2. 在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的优先级

  1. 在vue2中v-for的优先级高于v-if,可以放在一起使用,但是不建议这么做,会带来性能上的浪费
  2. 在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

五. diff算法不同

  1. vue2中的diff算法
  • 遍历每一个虚拟节点,进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方。
  • 用patch记录的消息去更新dom
  • 缺点:比较每一个节点,而对于一些不参与更新的元素,进行比较是有点消耗性能的。
  • 特点:特别要提一下Vue的patch是即时的,并不是打包所有修改最后一起操作DOM,也就是在vue中边记录变更新。(React则是将更新放入队列后集中处理)。
  1. vue3中的diff算法
  • 在初始化的时候会给每一个虚拟节点添加一个patchFlags,是一种优化的标识。
  • 只会比较patchFlags发生变化的节点,进行识图更新。而对于patchFlags没有变化的元素作静态标记,在渲染的时候直接复用。

六. 响应式原理不同

  1. vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现,Object.definedProperty()会遍历每一个属性。
  2. vue3通过proxy代理的方式实现。
  3. proxy的优势:不需要像Object.definedProperty()的那样遍历每一个属性,有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”,外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
  4. 当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历,会自动监听所有属性,有利于性能的提升

七. 插槽方式不同

  1. 在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>
  1. 在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>
  1. 总结:
  • 具名插槽使用方式不同:vue2使用slot=‘’,vue3使用v-slot:‘’
  • 作用域插槽使用方式不同:vue2中在父组件中使用slot-scope=“data"从子组件获取数据,vue3中在父组件中使用 #data 或者 #default=”{data}"获取

八. 样式穿透

vue2中:

/deep/ .类名{}
::v-deep .类名{}

vue3中:

:deep (.类名{})
::v-deep(.类名{})

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

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

相关文章

C语言如何控制输出最⼩宽度?

一、问题 数据的美观性问题&#xff0c;不仅需要使⽤标志进⾏占位&#xff0c;还需要对宽度等进⾏控制。那么如何控制宽度呢&#xff1f; 二、解答 控制宽度的问题&#xff0c;处理起来其实很简单。如果输出数据的实际位数⼤于定义的宽度&#xff0c; 则按实际位数输出&#x…

springboot151基于web的人力资源管理系统的设计与实现

人力资源管理系统的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;员工信息因为其管理内容繁杂&#xff0c;管理数量繁…

SSH免密切换服务器案例-ssh协议(公钥和私钥)

公钥和私钥理解 公钥提供加密&#xff0c;私钥解密&#xff0c;公钥可以共享&#xff0c;私钥不可以。举例公钥相当于锁头&#xff0c;可以给别人用&#xff0c;钥匙相当于私钥&#xff0c;只能开自己发出去的锁头&#xff0c;也就是私钥和公钥成对&#xff0c;私钥只能解密对…

~小青蛙跳台阶~C语言~刷题

引言 这次&#xff0c;我们要与一只活泼可爱的小青蛙合作&#xff0c;并引导它跳台阶。小青蛙的体力十分充沛&#xff0c;尤其喜欢跳跃&#xff0c;让它作为我们的助手&#xff0c;来看看有几种跳跃指定台阶数的方法。 本文会涉及到函数递归的知识&#xff0c;后续我会更新讲解…

清华系2B模型杀出,性能吊打LLaMA-13B

2 月 1 日&#xff0c;面壁智能与清华大学自然语言处理实验室共同开源了系列端侧语言大模型 MiniCPM&#xff0c;主体语言模型 MiniCPM-2B 仅有 24 亿&#xff08;2.4B&#xff09;的非词嵌入参数量。 在综合性榜单上与 Mistral-7B 相近&#xff0c;在中文、数学、代码能力表现…

基于深度卷积神经网络的图像配准(DeepSlice)

文章目录 一、基于DeepSlice的切片配准1.1、研究现状1.2、网络模型&#xff08;DeepSlice&#xff09;1.3、优化策略1.3.1、开发了一个基准数据集&#xff08;GT&#xff09;1.3.2、构建了阶段二的训练数据集&#xff08;增强训练&#xff09;1.3.3、角度集成 切割索引&#x…

【Linux】统信服务器操作系统V20 1060a-AMD64 Vmware安装

目录 ​编辑 一、概述 1.1 简介 1.2 产品特性 1.3 镜像下载 二、虚拟机安装 一、概述 1.1 简介 官网&#xff1a;统信软件 – 打造操作系统创新生态 统信服务器操作系统V20是统信操作系统&#xff08;UOS&#xff09;产品家族中面向服务器端运行环境的&#xff0c;是一款…

Linux驱动 SPI子系统

1、SPI协议 SPI&#xff08;Serial Peripheral Interface&#xff09;是一种同步串行数据通信协议&#xff0c;通常用于连接微控制器和外部设备&#xff0c;如传感器、存储器、显示器等。SPI协议使用四根线进行通信&#xff0c;包括时钟线&#xff08;SCLK&#xff09;、数据输…

CSS要点总结

一、CSS 快速入门 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css 快速入门</title><!-- 解读1. 在 head 标签内&#xff0c;出现了 <style type"text/css"></style…

Redis 的持久化机制是什么?各自的优缺点?

Redis 提供两种持久化机制 RDB&#xff08;默认&#xff09; 和 AOF 机制: RDB&#xff1a;是Redis DataBase缩写快照 RDB是Redis默认的持久化方式。按照一定的时间将内存的数据以快照的形式保存到硬盘中&#xff0c;对应产生的数据文件为dump.rdb。通过配置文件中的save参数来…

ChatLaw:基于LLaMA微调的法律大模型

文章目录 动机数据组成模型框架模型评估 北大团队发布首个的中文法律大模型落地产品ChatLaw&#xff0c;为大众提供普惠法律服务。模型支持文件、语音输出&#xff0c;同时支持法律文书写作、法律建议、法律援助推荐。 github地址&#xff1a;https://github.com/PKU-YuanGroup…

备份RK35XX 设备的ubuntu根文件系统的方法

简介 我们使用 RK35XX 提供的SDK包制作了一个完整的 ubuntu 镜像,烧录到设备中,会在设备中安装很多我们需要的软件,运行的一些自己写的脚本和业务程序,当我们有很多台设备时,不可能每台都一个个去安装,此时我们就需要一个工具来备份当前设备的根文件系统,然后再放到 SD…

2023年上-未来几年我要做什么

1月份&#xff0c;离职。 2月份&#xff0c;春节休假回来&#xff0c;中旬去参加了一个月的瑜伽培训&#xff0c;学会了倒立、鹤蝉。。。。 3月份&#xff0c;瑜伽培训结束&#xff0c;开始收拾房子&#xff0c;并调研各类项目。 4月份&#xff0c;参与了朋友的区块链项目 …

Leetcode—203. 移除链表元素【简单】

2024每日刷题&#xff08;一零九&#xff09; Leetcode—203. 移除链表元素 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(n…

详解kobject_uevent_env上报机制

示例 比如插拔sim卡会打印如下信息 [90133.351745] report_usim_event: usim uevent [USIM_NAMEusim0 USIM_EVENTplugout] is sent [90133.380554] USIM_NAMEusim0, USIM_EVENTplugout [90133.380645] serial_atcmd atcfun5[90176.496063] report_usim_event: usim uevent [U…

嵌入式linux移植篇之kernel

Linux的启动过程概述 Linux内核的启动过程是一个复杂而又有序的流程&#xff0c;涉及到硬件初始化、引导加载、内核初始化等多个步骤。以下是Linux内核的典型启动流程&#xff1a; BIOS/UEFI阶段&#xff1a; 电源启动&#xff1a;计算机通电后&#xff0c;BIOS&#xff08;…

#从零开始# 在深度学习环境中,如何用 pycharm配置使用 pipenv 虚拟环境

为Python项目创建虚拟环境 在深度学习环境和一般python环境中安装pipenv基本一致&#xff0c;只需要确认好pipenv指定的python版本即可,安装pipenv前&#xff0c;可以通过python --version来确认安装版本 快捷键&#xff1a;crtl alt S 查看interpreter&#xff0c;查看所有…

聊聊比特币----比特币地址

⽐特币地址是⼀个标识符&#xff08;帐号&#xff09;&#xff0c;包含27-34个字母数字拉丁字符&#xff08;0&#xff0c;O&#xff0c;I除外&#xff09;。地址可以以QR码形式表⽰&#xff0c;是匿名的&#xff0c;不包含关于所有者的信息。 地址⽰例&#xff1a;14qViLJfdG…

【51单片机】开发板和单片机的介绍(2)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

[Python] 什么是KMeans聚类算法以及scikit-learn中的KMeans使用案例

什么是无监督学习&#xff1f; 无监督学习是机器学习中的一种方法&#xff0c;其主要目的是从无标签的数据集中发现隐藏的模式、结构或者规律。在无监督学习中&#xff0c;算法不依赖于任何先验的标签信息&#xff0c;而是根据数据本身的特征和规律进行学习和推断。无监督学习…