当前位置: 首页 > news >正文

vue2和vue3的区别

    这周呢主要就是整理整理学的东西,不然看的也记不住,把这些学的东西做成笔记,感觉会清楚许多,这次就把vue2和vue3的区别总结一下,明天要考四级,嗐,本来想着复习四级,结果只写了一两套题,四级这有点悬呀。

1.API

  • vue2:vue2使用选项类型API,选项类型API在代码里分割了不同的属性data,computed,methods等,一个逻辑散乱在文件不同的位置,导致代码可读性变乱

  • vue3:vue3中使用组合式API,将逻辑内容写到一起,增强了代码的可读性,还提供了逻辑复用性方案

2.生命周期

整体变化不大,但在vue3在组合式API中使用生命周期的时候,要先引入。而Vue2在选项API中可直接调用生命周期钩子。

vue2vue3
beforeCreate
created
beforeMountonbeforeMount
mountedmounted
beforeUpdateonbeforeUpdate
updatedonupdated
beforeDestoryonbeforeDestory
destoryedondestoryed

除了这些钩子函数,vue3还增加了onRenderTracked 和onRenderTriggered函数。

setup是围绕beforeCreate和created钩子函数去运行的,所以不需要显示去定义

3.多根节点

vue2中多根节点会报错

//vue2中存在多个节点会报错,但是vue3中支持多个节点
<template><header></header><main></main><footer></footer>
</template>
//只能存在一个根节点,需要一个div包裹
<template><div><header></header><main></main><footer></footer></div>
</template>

4.异步组件Suspense

​ vue3提供的Suspense组件,有两个插槽:#default#fallback,来确保加载完成异步内容是显示默认插槽,并将#fallback插槽用作加载状态。

​ Suspense常见的使用场景:

配合vue3中的defineAsyncComponent来加载异步组件时,进行loading处理

配合路由使用,当未加载完毕时不显示router-view,而是渲染fallback的内容

<template><div class="child"><h3>我是Child组件</h3></div>
</template><script>
import {ref} from 'vue'
export default {name:'Child',setup(){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve({sum})},3000)})}
}
</script>
<style>
.child{background-color:rgb(206, 225, 65) ;padding: 10px;
}
</style>

​ Child组件(有可能是异步组件,也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等)未加载完成前,显示 Loading…(即 fallback 插槽内容),加载完成时显示自身(即 default 插槽内容)

<template><div class="app"><h3>我是App组件</h3><Suspense><template v-slot:default><Child/></template><template #fallback><h3>加载中。。。</h3></template></Suspense></div>
</template><script>
// import Child from './components/Child.vue'//静态引入
import {defineAsyncComponent} from  'vue' 
const Child = defineAsyncComponent(()=>import('./components/Child.vue')) //异步引入
export default {name:'App',components:{Child}
}
</script><style>
.app{background-color:royalblue ;padding: 10px;
}
</style>

Suspense组件会触发三个事件:pendingresolvefallback

  1. pending:pending事件是在进入挂起状态时触发。
  2. resolve:resolve事件是在default插槽完成获取新内容时触发。
  3. fallback:fallback事件是在fallback插槽的内容显示时触发

5.Telport

vue3提供了Telport组件可将部分DOM移动到vue app之外的地方。比如说经常要是用的dialog弹框

<template><button @click="isShow = true">点我弹个窗</button><teleport to="#teleport-target">//将对话框移动到了teleport-target盒子下面<div v-if="isShow" class="mask"><div class="dialog"><h4>我是一个对话窗组件</h4><h4>我是一个对话窗组件</h4><button @click="isShow = false">关闭弹窗</button></div></div></teleport>
</template>

6.响应式原理

​ 1.vue2响应式原理基础是Object.defineProperty,通过Object.defineProperty来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调

​ Object.defineProperty基本用法:直接在一个对象上定义新的属性或修改现有的属性,并返回对象

​ 2.vue3响应式原理基础是Proxy相较于vue2,提供语言全范围响应能力,消除了局限性

​ 3.差异如下:

vue2

  1. Object.defineProperty,不具备监听数组的能力,需要重新定义数组的原型来达到响应式
  2. Object.defineProperty无法监测到对象属性的添加和删除
  3. 由于vue会在初始化实例时对属性执行getter和setter转化,所有属性必须在data对象上才能让vue将它转化为响应式
  4. 深度监听需要一次递归,对性能影响较大

vue3

  1. 基于Proxy和Reflect,可以原生监听数组,可以监听对象属性的添加和删除
  2. 不需要一次性遍历data的属性,可以显著提高性能

7.TypeScript支持

vue3由typeScript重写,相对vue2有更好的typeScript的支持

最后,vue3比vue2还新增了响应式的API(reactive、ref等),响应式侦听(watchEffect)等

相关文章:

vue2和vue3的区别

这周呢主要就是整理整理学的东西&#xff0c;不然看的也记不住&#xff0c;把这些学的东西做成笔记&#xff0c;感觉会清楚许多&#xff0c;这次就把vue2和vue3的区别总结一下&#xff0c;明天要考四级&#xff0c;嗐&#xff0c;本来想着复习四级&#xff0c;结果只写了一两套…...

【你不知道的事】JavaScript 中用一种更先进的方式进行深拷贝:structuredClone

你是否知道&#xff0c;JavaScript中有一种原生的方法来做对象的深拷贝? 本文我们要介绍的是 structuredClone 函数&#xff0c;它是内置在 JavaScript 运行时中的: const calendarEvent {title: "Builder.io Conf",date: new Date(123),attendees: ["Steve…...

XE开发Linux应用(二)-Webservice

新建一个工程。选择如图。继续输入服务名然后就生成对应的单元。增加linux 平台。完善对应的单元代码{ Invokable implementation File for Txaliontest which implements Ixaliontest }unit xaliontestImpl;interfaceuses Soap.InvokeRegistry, System.Types, Soap.XSBuiltIns…...

kubernetes实战与源码学习

1.1 关于Kubernetes的介绍与核心对象概念 关于Kubernetes的介绍与核心对象概念-阿里云开发者社区 k8s架构 核心对象 使用kubeadm10分钟部署k8集群 使用 KuboardSpray 安装kubernetes_v1.23.1 | Kuboard k8s-上部署第一个应用程序 Deployment基本概念 给应用添加service&a…...

CNCF x Alibaba云原生技术公开课 第八章 应用配置管理

Pod配置管理分类 可变配置就用 ConfigMap&#xff1b;敏感信息是用 Secret&#xff1b;身份认证是用 ServiceAccount&#xff1b;资源配置是用 Resources&#xff1b;安全管控是用 SecurityContext&#xff1b;前置校验是用 InitContainers。 1、ConfigMap 概念&#xff1a;…...

YUV实践记录

文章目录YUV基础介绍&#xff1a;不同采样YUV格式的区别为什么要使用YUV格式呢&#xff1f;YUV的存储方式Android中的YUV_420_888附录&#xff1a;YUV基础介绍&#xff1a; YUV在做手机图像或者视频处理的时候会经常用到的一个格式&#xff0c;用此文来记录YUV相关介绍&#xf…...

【题解】百度2020校招Web前端工程师笔试卷(第一批):单选题、多选题

题目来源 若有错误请指正&#xff01; 单选 1 分页存储管理将进程的逻辑地址空间分成若干个页&#xff0c;并为各页加以编号&#xff0c;从0开始&#xff0c;若某一计算机主存按字节编址&#xff0c;逻辑地址和物理地址都是32位&#xff0c;页表项大小为4字节&#xff0c;若…...

探索云原生技术之容器编排引擎-kubeadm安装kubernetes1.21.10(新版:针对高版本内核)

❤️作者简介&#xff1a;2022新星计划第三季云原生与云计算赛道Top5&#x1f3c5;、华为云享专家&#x1f3c5;、云原生领域潜力新星&#x1f3c5; &#x1f49b;博客首页&#xff1a;C站个人主页&#x1f31e; &#x1f497;作者目的&#xff1a;如有错误请指正&#xff0c;将…...

2023广西自治区职业技能大赛“网络安全” 项目比赛任务书

2023广西自治区职业技能大赛“网络安全” 项目比赛任务书2023广西自治区职业技能大赛“网络安全” 项目比赛任务书A模块基础设施设置/安全加固&#xff08;200分&#xff09;A-1&#xff1a;登录安全加固&#xff08;Windows, Linux&#xff09;A-2&#xff1a;Nginx安全策略&a…...

Reactor模式

Reactor是一种设计模式&#xff0c;可以用于构建高并发的网络服务器。 Reactor模式的好处在于&#xff1a;可以在一个或多个reactor线程使用多路复用技术去管理所有网络连接连接建立、IO请求&#xff0c;保证工作线程不被IO阻塞。 前置知识&#xff1a;IO多路复用技术 1. 传统网…...

Git图解-IDEA中的Git操作

目录 一、配置Idea 二、项目克隆 三、文件状态识别 四、Git操作 4.1 git add--添加暂存区 4.2 git commit--提交本地仓库 4.3 git push--推送远程仓库 4.4 git pull--更新本地仓库 五、完整开发流程 5.1 步骤1&#xff1a;克隆项目 5.2 步骤2&#xff1a;创建自己开发…...

在一个web应用中应该如何完成资源的跳转

在一个web应用中通过两种方式&#xff0c;可以完成资源的跳转&#xff1a; 第一种方式&#xff1a;请求转发 第二种方式&#xff1a;重定向 转发和重定向的区别&#xff1a; 代码上的区别&#xff1a; 请求转发 // 获取请求转发器对象 RequestDispatcher dispatcher request.…...

前缀和部分题目

前缀和 前缀和指数组的前 N项之和&#xff0c;是个比较基础的算法 例题 面试题 17.05. 字母与数字 给定一个放有字母和数字的数组&#xff0c;找到最长的子数组&#xff0c;且包含的字母和数字的个数相同。 返回该子数组&#xff0c;若存在多个最长子数组&#xff0c;返回左…...

三天吃透MySQL面试八股文

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…...

Giving You A guide to learning any topic faster than 95% of people

A guide to learning any topic faster than 95% of people: Richard Feynman was a physician who won the Nobel Prize in 1965. But he became known for his great lectures. Why? He was able to explain complex concepts in simple terms with these 4 steps: 1 • E…...

(七十七)大白话MySQL是如何根据成本优化选择执行计划的?(中)

上次我们讲完了全表扫描的成本计算方法&#xff0c;相信大家应该都理解了&#xff0c;其实还是比较简单的&#xff0c;今天我们来讲一下索引的成本计算方法&#xff0c;因为除了全表扫描之外&#xff0c;还可能多个索引都可以使用&#xff0c;但是当然同时一般只能用一个索引&a…...

原来CSS 也可以节流啊

Ⅰ、前言 「节流」 是为了减少请求的触发频率&#xff0c;不让用户点的太快&#xff0c;达到节省资源的目的 &#xff1b;通常 我们采用 JS 的 定时器 setTimeout &#xff0c;来控制点击多少秒才能在触发&#xff1b;其实 通过 CSS 也能达到 「节流」 的目的&#xff0c;下面…...

UE官方教程笔记03-功能、术语、操作简介

对官方教程视频[官方培训]03-UE功能、术语、操作简介 | 徐良安 Epic的笔记这一部分基本都是走马观花的简单介绍功能世界创建建模Mesh editingtool是一个全新的建模工具&#xff0c;具备大多数的主流建模软件的核心功能HOUDINI ENGINE FOR UNREALHoudini编辑器&#xff0c;可以用…...

BN,LN,IN,GN的理解和用法

绿色区域表示将该区域作用域(四种方法都贯穿了w,h维度)&#xff0c;即将该区域数值进行归一化&#xff0c;变为均值为0&#xff0c;标准差为1。BN的作用区域时N,W,H,表示一个batch数据的每一个通道均值为0&#xff0c;标准差为1&#xff1b;LN则是让每个数据的所有channel的均值…...

Linux:epoll模式web服务器代码,代码debug

源码&#xff1a; https://blog.csdn.net/weixin_44718794/article/details/107206136 修改的地方&#xff1a; 修改后代码&#xff1a; #include <stdio.h> #include <unistd.h> #include <stdlib.h> //#include “epoll_server.h” #ifndef _EPOLL_SER…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...