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时节点数量。

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

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

相关文章

前端Vue3+uni+Ts

本次记录小兔仙仙的制作过程。 先看下我们的项目截图。主要是手机端,这里用了uniappVScode.三端适配的。可以打包成安卓和苹果。微信小程序。 首先:创建一个uni新的ts项目。 # 通过 git 从 gitee 克隆下载 登录 - Gitee.com git clone -b vite-ts http…

jar 反编译工具

Jar包常见的反编译工具介绍与使用_jar反编译-CSDN博客

构建跨设备3D应用:HOOPS的跨平台开发能力

在当今数字化和可视化需求不断提升的时代,三维技术的应用越来越广泛,尤其在制造、建筑、工程及媒体行业。HOOPS,由Tech Soft 3D开发,是一套全面的软件开发工具包,用于构建高性能的三维应用程序。该工具包涵盖了从三维渲…

微信小程序使用we-rich的一些修改和兼容富文本编辑器

不支持转换s标签,可在supportTags数组内添加后和识别不支持style,class,src以外的属性,可在if (key ‘style’ || key ‘class’ || key ‘src’)后增加key ‘width’|| key ‘height’,这样可以兼容富文本编辑器…

Java最长公共子序列知识点(含面试大厂题和源码)

最长公共子序列(Longest Common Subsequence,简称LCS)是计算机科学中的一个经典问题,主要涉及两个序列,并寻找这两个序列中最长的共有子序列。这个子序列不需要在原序列中连续,但必须保持元素的相对顺序。L…

Centos7在线安装mysql5.7

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 安装Mysql yum源1、卸载旧环境2、下载mysql yum源3、上传到自己服务器1)、上传源2)、安装yum源3)、查看yum源是否安装成功 安装M…

信息系统项目管理师——管理类计算

风险管理——风险曝光度 风险曝光度概率*影响,概率指风险发生的概率,影响指风险一旦发生,受到影响的项。 题号【GX20061101](61) 知识点[风险曝光度] 风险的成本估算完成后,可以针对风险表中每个风险计算其风险曝光度。某软件小…

面试官:MySQL的自增 ID 用完了,怎么办?

如果你用过或了解过MySQL,那你一定知道自增主键了。每个自增id都是定义了初始值,然后按照指定步长增长(默认步长是1)。虽然,自然数是没有上限的,但是我们在设计表结构的时候,通常都会指定字段长…

0.25W 3KVDC 隔离单、双输出 DC/DC SMD 型电源模块 ——TPVT-W2 系列

TPVT-W2系列是一款标准的表面贴装电源模块,完全实现采用全自动贴片机来组装和满足回流焊工艺,大大提高产能和降低人工费用。此系列产品小,效率高,低输出纹波及提供3000V以上的直流电压隔离,SMD封装。

在vue中使用bing map 的小demo

1.注意事项(关于经纬度) 如果不转换成WGS84 标准的经纬度 bing map会报错 如果要在 Bing Maps 中使用中国地区的经纬度,需要先将其转换为 WGS84 标准的经纬度。你可以使用第三方的坐标转换服务,或者使用相关的 JavaScript 库进行…

从数据中台到上层应用全景架构示例

一、前言 对于大型企业而言,数据已经成为基本的生产资料,但是有很多公司还是值关心上层应用,而忽略了数据的治理,从而并不能很好的发挥公司的数据资产效益。比如博主自己是做后端的,主要是做应用层,也就是…

计算机网络 Cisco路由信息协议(RIP)实验

一、实验内容 1、命名 2、关闭域名解释 3、设置路由器接口IP地址 4、根据要求配置RIP以实现所有客户机都能相互通信 5、配置默认路由 二、实验数据处理 1、建立拓扑图 2、PC机地址配置 主机IP地址子网掩码网关PC110.23.1.2255.255.255.010.23.1.1PC210.23.1.3255.255.2…

将普通用户加入Docker组,使用docker

创建名为 “docker” 的组 要创建名为 “docker” 的组,您可以使用以下命令: sudo groupadd docker这将创建一个名为 “docker” 的组。您可以使用此组来管理 Docker 容器的访问权限。 查看 Docker 组中的用户 要查看 Docker 组中的用户,…

OR36 链表的回文结构

描述 对于一个链表,请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法,判断其是否为回文结构。 给定一个链表的头指针A,请返回一个bool值,代表其是否为回文结构。保证链表长度小于等于900。 测试样例: 1->…

ChatGPT革新论文写作:让文章无往不利

ChatGPT无限次数:点击直达 ChatGPT革新论文写作:让文章无往不利 在当今信息爆炸的时代,写作是一项至关重要的技能,它不仅仅是传递信息的工具,更是展示思想、沟通观点的重要方式。而随着人工智能技术的不断发展,ChatGP…

代码随想录算法练习Day13:有效的字母异位词

题目: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词。 题目链接:242.有效的字母异位词 卡哥的视频讲解&#xff…

SCM供应链一体化平台:增强企业竞争力的必备利器

SCM供应链一体化平台是一种集成的软件系统,用于管理和优化企业的供应链活动。它将供应链中的各个环节,如采购、生产、物流、销售等,整合在一个统一的平台上,实现信息共享、协同工作和流程优化。 SCM供应链一体化平台的主要功能包括…

Linux/Iclean

Iclean Enumeration nmap 先使用默认规则扫描常用的端口,发现对外开放了 22 和 80 端口,然后扫描这两个端口的详细信息,结果如下,很常规的结果,没发现什么有趣的东西 ┌──(kali㉿kali)-[~/vegetable/HTB/Iclean] …

Appium 并发测试之 python 启动 appium 服务

python 启动appium服务,需要使用subprocess模块,该模块可以创建新的进程,并且连接到进程的输入,输出,错误等管道信息,并且可以获取进程的返回值 测试场景 使用python启动2台appium服务,端口配置…

面试经典150题——轮转数组

面试经典150题 day6 题目来源我的题解方法一 使用额外数组方法二 循环替换方法三 数组翻转 题目来源 力扣每日一题;题序:189 我的题解 方法一 使用额外数组 使用一个额外数组暂存最终答案,最后再赋值给nums 时间复杂度:O(n) 空…