VUE3.0对比VUE2.0
vue3.0 与 vue2.0的不同之处有以下几点:
数据响应式原理
3.0基于Proxy的代理实现监测,vue2.0是基于Object.defineProperty实现监测。
vue2.0 通过Object.defineProperty,每个数据属性被定义成可观察的,具有getter和setter方法,当这些属性被修改后,Vue会自动追踪并重新计算相关的渲染函数,并更新视图。
vue3.0 通过Proxy用于创建一个对象的代理,从而实现对被代理对象操作的的拦截和自定义。
const proxy = new Proxy(target, handler)
// target:要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
// handler:一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时被代理对象的行为(可以将其理解为一个容器,容器中包含着一些列可以操作对象的方法)。
Proxy代理的优点:可以检测到对象属性的新增和删除,监测到数据的索引和长度的变更。缺点是不支持低版本的浏览器。
API使用的方式
vue3.0 支持 组合式api,也可以称为函数式API,可以方便我们把vue的实例的api选项拆成更小的函数,这样的好处是:方便组件代码的重组。在vue3.0中,我们可以通过核心函数setup()执行中生成Vue3.0的所有选项(data, computed,wacher, methods)
官方推荐的项目脚手架工具
vue2.0 推荐使用webpack或者是vue-cli来进行项目的构建和打包。
vue3.0 推荐使用vite工具进行项目构建和打包。
vite 的特点是本地开发编译时候,速度特别快。在开发环境中,Webpack 是先打包再启动开发服务器,而 Vite 则是直接启动,然后再按需编译依赖文件。
当使用 Webpack 时,所有的模块都需要在开发前进行编译打包,而 Vite在请求模块时才会进行实时编译,这种按需动态编译的模式极大地缩短了编译时间。
生命周期的不同
Vue 2.0 的生命周期:
beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置 (event/watcher option) 之前被调用。
created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer)、属性和方法的运算、watch/event 事件回调。
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted:实例挂载完成后调用。
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有DOM,如移除手动设置的class。
updated:由于数据更改导致的虚拟 DOM 重新渲染
activated:keepalive 缓存组件激活
deactivated:keepalive 组件缓存。
beforeDestroy:实例销毁之前调用。
destroyed:实例销毁后调用。
Vue 3.0 的生命周期:
onBeforeMount:在挂载之前被调用
onMounted:在挂载之后被调用
onBeforeUpdate:在更新之前被调用
onUpdated:在更新之后被调用
onBeforeUnmount:在卸载之前被调用
onUnmounted:在卸载之后被调用
组件实例的创建方式
vue2.0 使用extend或者vue.component()
vue3.0 使用defineComponent()
官方推荐的http请求库
vue2.0推荐axios,通常会使用第三方库 axios 或者 vue-resource 来进行 HTTP 请求的封装。这些库通常需要在全局导入后才能使用,然后通过在组件内部使用相关方法来发起请求。
vue3.0推荐vite-plugin-mock, 该库已经内置了一套基于axios的请求拦截和响应的机制,并且在vite默认启用,减少了大量的重复代码。
diff 算法
Vue3.0中, 使用静态标记的dff算法。在编译阶段,Vue会对模板进行分析,将节点分为动态节点和静态节点。并给静态节点添加标记。在更新过程中,Vue会跳过这些静态节点,只对非静态节点进行diff操作,这个优化可以减少diff算法的时间复杂度。
Vue2.0中,使用递归和双指针算法的diff策略。更新DOM时,Vue会对新旧虚拟DOM树遍历比较,找出不同的节点。然后更新变化的节点,这个算法的时间复杂度时 O(n) , 其中n时节点数量。
相关文章:
VUE3.0对比VUE2.0
vue3.0 与 vue2.0的不同之处有以下几点: 数据响应式原理 3.0基于Proxy的代理实现监测,vue2.0是基于Object.defineProperty实现监测。 vue2.0 通过Object.defineProperty,每个数据属性被定义成可观察的,具有getter和setter方法&…...
车内AR互动娱乐解决方案,打造沉浸式智能座舱体验
美摄科技凭借其卓越的创新能力,为企业带来了革命性的车内AR互动娱乐解决方案。该方案凭借自研的AI检测和渲染引擎,打造出逼真的数字形象,不仅丰富了车机娱乐内容,更提升了乘客与车辆的互动体验,让每一次出行都成为一场…...
OR36 链表的回文结构
描述 对于一个链表,请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法,判断其是否为回文结构。 给定一个链表的头指针A,请返回一个bool值,代表其是否为回文结构。保证链表长度小于等于900。 测试样例: 1->…...
【译】微调与人工引导: 语言模型调整中的 SFT 和 RLHF
原文地址:Fine-Tuning vs. Human Guidance: SFT and RLHF in Language Model Tuning 本文主要对监督微调(SFT, Supervised Fine Tuning )和人类反馈强化学习(RLHF, Reinforcement Learning from Human Feedback)进行简…...
kylin java.io.IOException: error=13, Permission denied
linux centos7.8 error13, Permission denied_linux open error13-CSDN博客 chmod -R 777 /home/zengwenfeng/kkFileView-4.2.1 2024-04-15 13:15:17.416 WARN 3400 --- [er-offprocmng-1] o.j.l.office.LocalOfficeProcessManager : An I/O error prevents us to determine…...
前端面试01总结
1.Js 中!x为true 时,x可能为哪些值 答: 1.false:布尔值false 2.0或-0:数字零 3.""或’或 (空字符串):长度为0的字符串 4.null:表示没有任何值的特殊值 5.undefined:变量未定义时的默认…...
算法--目录
algorithm: 十种排序算法 二分法-各种应用 algorithm: 拓扑排序 算法中的背包问题 最长子序列问题 前缀和-解题集合 差分数组-解题...
ArcGIS Pro 3D建模简明教程
在本文中,我讲述了我最近一直在探索的在 ArcGIS Pro 中设计 3D 模型的过程。 我的目标是尽可能避免与其他软件交互(即使是专门用于 3D 建模的软件),并利用 Pro 可以提供的可能性。 这个短暂的旅程分为三个不同的阶段:…...
24届数字IC设计/验证秋招总结贴——先看这个
文章目录 前言一、经验篇二、知识学习篇三、笔试篇3.1 各大公司笔试真题3.2 华为机试——数字芯片笔试题汇总 四、面试篇4.1 时间节点4.2 提前批4.3 正式批 前言 为方便快速进行查找该专栏的内容,将所有内容链接均放在此篇博客中 整理不易,欢迎订阅~~ …...
带洞平面三角分割结果的逆向算法
先标不重复点,按最近逐个插入。 只说原理。 不带洞的 1 2 4 2 3 4 两个三角形 结果 1 2 3 4 无重复 无洞 1 2 6 1 2 3 6 1 2 3 7 6 1 2 3 4 7 6 1 2 3 4 5 7 6 1 2 3 4 1 5 7 6 1 2 3 4 1 6 5 7 6 最终结果 1 2 3 4 1 6 5 7 6 按重复分割 1 2 3…...
MGRE-OSPF接口网络类型实验
OSPF接口网络类型实验 一,实验拓扑 初始拓扑: 最终拓扑: 二,实验要求及分析 要求: 1,R6为ISP只能配置IP地址,R1-R5的环回为私有网段 2,R1/R4/R5为全连的MGRE结构,R…...
ChatGPT科研利器详解:写作论文轻松如玩游戏
ChatGPT无限次数:点击直达 ChatGPT科研利器详解:写作论文轻松如玩游戏 引言 在当今科技日新月异的时代,人工智能技术的应用越来越广泛,其中自然语言处理领域的发展尤为迅猛。ChatGPT作为一款先进的文本生成模型,为科研工作者提供…...
vue3从精通到入门23:定义全局变量
在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxxxxx来定义全局变量, 比如定义一个全局的工具函数。 // 定义 ... Vue.prototype.$utilsutils;// 使用 this.$utils() ... 在vue3中我们无法使用this,提供了globalProperties; …...
反爬虫之代理IP封禁-协采云IP池
反爬虫之代理IP封禁-协采云IP池 1、目标网址2、IP封禁4033、协采云IP池 1、目标网址 aHR0cDovL3d3dy5jY2dwLXRpYW5qaW4uZ292LmNuLw 2、IP封禁403 这个网站对IP的要求很高,短时间请求十几次就会遭关进小黑屋。如下图: 明显是网站进行了反爬处理&…...
ELK-Kibana 部署
目录 一、在 node1 节点上操作 1.1.安装 Kibana 1.2.设置 Kibana 的主配置文件 1.3.启动 Kibana 服务 1.4.验证 Kibana 1.5.将 Apache 服务器的日志(访问的、错误的)添加到 ES 并通过 Kibana 显示 1.6. 浏览器访问 二、部署FilebeatELK&…...
Backtrader 量化回测实践(7)——在jupyter中执行bt的samples
Backtrader 量化回测实践(7)——在jupyter中执行bt的samples Backtrader提供了大量的测试用例,在samples目录下,测试程序主要都是用argparse解析参数,但是不能在jupyter中直接执行。 找到一个解决方法,可…...
npm vs. pnpm vs. Yarn: 三者之间的区别与比较
在现代前端开发中,包管理工具是必不可少的一环。npm、pnpm和Yarn是三个常用的包管理工具,它们各有特点,适用于不同的场景。本文将深入讨论这三者的基本概念、特点、优势和劣势,并对比分析它们之间的主要区别,包括功能、…...
Learning Feature Sparse Principal Subspace 论文阅读
1 Abstract: 这篇论文提出了新的算法来解决特征稀疏约束的主成分分析问题(FSPCA),该问题同时执行特征选择和PCA。现有的FSPCA优化方法需要对数据分布做出假设,并且缺乏全局收敛性的保证。尽管一般的FSPCA问题是NP难问题ÿ…...
Hibernate入门经典与注解式开发大全
本博文主要讲解介绍Hibernate框架,ORM的概念和Hibernate入门,相信你们看了就会使用Hibernate了! 什么是Hibernate框架? Hibernate是一种ORM框架,全称为 Object_Relative DateBase-Mapping,在Java对象与关系数据库之间建…...
蓝桥杯之注意事项
1.特殊求解的地方 2.一些数学公式 比如二叉树求全深度数值那道题 3.掌握有关库函数 #include<algorithm> 包含sort()函数【排列函数】C sort()排序详解-CSDN博客,next_permutation()函数【求解全排列问题】求解数组大小sizeof(arr…...
ES6 全详解 let 、 const 、解构赋值、剩余运算符、函数默认参数、扩展运算符、箭头函数、新增方法,promise、Set、class等等
目录 ES6概念ECMAScript6简介ECMAScript 和 JavaScript 的关系ES6 与 ECMAScript 2015 的关系 1、let 、 const 、var 区别2、变量解构赋值1、数组解构赋值2、对象解构赋值3、字符串的解构赋值 3、展开剩余运算符1、**展开运算符(...)**2、**剩余运算符(...)** 4、函数的拓展函…...
c++ - 类的默认成员函数
文章目录 前言一、构造函数二、析构函数三、拷贝构造函数四、重载赋值操作符五、取地址及const取地址操作符重载 前言 默认成员函数是编译器自动生成的,也可以自己重写,自己重写之后编译器就不再生成,下面是深入了解这些成员函数。 一、构造…...
Java哈希查找(含面试大厂题和源码)
哈希查找(Hash Search)是一种基于哈希表(Hash Table)的数据查找方法。哈希表通过使用哈希函数将键(Key)映射到表中的位置来存储数据,从而实现快速的数据访问。哈希查找的效率通常取决于哈希函数…...
c++中常用库函数
大小写转换 islower/isupper函数 char ch1 A; char ch2 b;//使用islower函数判断字符是否为小写字母 if(islower(ch1)){cout << ch1 << "is a lowercase letter." << end1; } else{cout << ch1 << "is not a lowercase lette…...
Scrapy框架 进阶
Scrapy框架基础Scrapy框架进阶 【五】持久化存储 命令行:json、csv等管道:什么数据类型都可以 【1】命令行简单存储 (1)语法 Json格式 scrapy crawl 自定义爬虫程序文件名 -o 文件名.jsonCSV格式 scrapy crawl 自定义爬虫程…...
ubuntu22安装snipaste
Ubuntu 22.04 一、Snipaste 介绍和下载 Snipaste 官网下载链接: Snipaste Downloads 二、安装并使用 Snipaste # 1、进入Snipaste-2.8.9-Beta-x86_64.AppImage 目录(根据自己下载目录) cd /home/jack/Downloads/softwares/AppImage# 2、Snipaste-2.8.9-…...
spring-cloud微服务openfeign
Spring Cloud openfeign对Feign进行了增强,使其支持Spring MVC注解,另外还整合了Ribbon和Nacos,从而使得Feign的使用更加方便 优势,openfeign可以做到使用HTTP请求远程服务时就像洞用本地方法一样的体验,开发者完全感…...
小程序变更主体需要多久?
小程序迁移变更主体有什么作用?小程序迁移变更主体的好处有很多哦!比如可以获得更多权限功能、公司变更或注销时可以保证账号的正常使用、收购账号后可以改变归属权或使用权等等。小程序迁移变更主体的条件有哪些?1、新主体必须是企业主体&am…...
19 Games101 - 笔记 - 相机与透镜
**19 ** 相机与透镜 目录 摘要一 照相机主要部分二 小孔成像与视场(FOV)三 曝光(Exposure)四 景深(Depth of Field)总结 摘要 虽说照相机与透镜属于相对独立的话题,但它们的确是计算机图形学当中的一部分知识。在过往的十多篇笔记中,我们学习的都是如…...
Flink入门学习 | 大数据技术
⭐简单说两句⭐ ✨ 正在努力的小新~ 💖 超级爱分享,分享各种有趣干货! 👩💻 提供:模拟面试 | 简历诊断 | 独家简历模板 🌈 感谢关注,关注了你就是我的超级粉丝啦! &…...
建网站用的域名多少钱/百度高级搜索首页
深入浅出ShellExecute 译者:徐景周(原作:Nishant S)Q: 如何打开一个应用程序? ShellExecute(this->m_hWnd,"open","calc.exe","","", SW_SHOW );或 ShellExecute(this->m_hWnd,"open","no…...
wordpress论坛vip破解/广告外链平台
正负样本不均衡是检测任务中常见的问题,在目标检测中,大量样本都是不包含目标的负样本,只有少量是包含目标的正样本,而Focal Loss就是为了解决这个问题而提出的。 Focal Loss的目的 focal loss的主要目的是降低易分类样本的权重…...
游戏开发工程师需要学什么/佛山百度网站排名优化
今天折腾了一天的SPI设备的驱动加载,甚至动用了逻辑分析仪来查看spi总线的波形,主要包括两个SPI设备,at45db321d和mcp2515,一个是串行的dataflash,一个是can总线设备芯片。前者对于我们来说非常重要,我们可…...
建设企业人力资源网站/关键词采集网站
{2015-04-24}接口更新了,暂时用不了了。 再次更新:【2015-4-24 22:13:11】接口链接更新。正常。 function getWeather($city){include weather_code.php;$code$weather_code[$city];//$url"http://tq.360.cn/api/weatherquery/querys?apptq360&am…...
知名广州网站建设/长沙网站推广公司排名
前言:monkey使用时遇到的问题,做一个简单的留档,为以后遇到时自己能快速找到,也希望能帮助到需要的人。monkey简介:monkey 就是SDK中附带的一个工具。它向系统发送伪随机的用户事件流(如按键输入、触摸屏输入、手势输入…...
自己的网站统计输入词/微商软文范例大全100
悠悠导航地图app是一款非常好用的手机导航软件,这里有着专业全面的导航内容,让你出行可以更方便,悠悠导航地图app有着专业精准的导航功能,还能为你提供周边相关吃喝玩乐服务平台,非常安全便捷,赶快来用吧&a…...