Vue2 和 Vue3 有什么区别?

news2024/11/12 20:09:35

1. 数据双向绑定的响应式原理不同

  • vue2 在初始化的时候,对 data 中的每个属性使用 Object.defineProperty() 调用 get 和 set 使之变为响应式对象。
    如果属性值为对象,需要递归调用 defineProperty 使之变为响应式对象。
    缺陷:Object.defineProperty() 后添加的属性是劫持不到的,所以在 methods 方法里操作(添加或删除)对象属性值时,会造成数据更新,视图不更新。
    • 使用 this.$set(this.obj, ‘c’, ‘3’)
  • vue3 使用 ES6 的 new Proxy() (对数据进行代理)对象重写响应式。
    即使后添加的也可以劫持到,不会造成数据更新,视图不更新。
    proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,在多层属性嵌套时,只有访问某个属性才会递归处理下一级的属性。
  • 响应式原理改成了用proxy,解决了数组无法通过下标修改,无法监听到对象属性的新增和删除问题。也提升了响应式的效率
  • vue3并不是完全抛弃了defineProperty,通过reactive定义的响应式数据使用proxy包装出来,而ref还是用的defineProperty去给一个空对象,定义了一个value属性来做的响应式。

2. 是否支持碎片?组件模版和语法扩展

  • vue2 支持单个根元素,不支持碎片
  • vue3 引入 fragment 支持多个根节点,template模版可以不包在一个根div里

3. API 设计不同

  • vue2 选项式API
  • vue3 组合式API(setup语法糖形式),没有this
  • 用组合式API替换选项式API,方便逻辑更加的聚合。
  • 组合式api的写法下,源码改成了函数式编程,方便按需引入,因为tree-shaking功能必须配合按需引入写法。所以vue3更好滴配合tree-shaking能让打包体积更小。

4. 定义数据变量方法不同

  • vue2 数据放在 data 里,方法放在 method 里
  • vue3 使用 setup,在组件初始化时触发

5. 生命周期钩子函数不同

  • 生命周期没有creat,setup等同于create,卸载改成unmount

6. 传值不同

  • v-model应用于自定义组件时,监听的事件和传递的值不同
    • vue2中v-model传递的是value,监听的是change或input
    • vue3中v-model传递的是modelValue,监听updata: modelValue

7. 指令和插槽不同

  • vue3中v-if高于v-for的优先级

8. main.js 不同

  • 根实例的创建从new app变成了createApp方法
  • 一些全局注册,比如mixin,注册全局组件,use改成了用app实例调用,而不是vue类调用

9. 性能优化

  • vue3增加了静态节点标记。会标记静态节点,不对静态节点进行比对。从而增加效率。
  • vue3不推荐使用mixin进行复用逻辑提取,而是推荐写成hook
    • vue2
      在这里插入图片描述
    • vue3
      在这里插入图片描述

10. ts更好地配合

11. vue3没有this.$set

12. webpack 和 vite 的不同

13. 新增了传送门teleport组件

teleport组件

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

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

相关文章

分类预测|基于麻雀优化支持向量机的Adaboost集成的数据分类预测Matlab程序SSA-SVM-Adaboost

分类预测|基于麻雀优化支持向量机的Adaboost集成的数据分类预测Matlab程序SSA-SVM-Adaboost 文章目录 一、基本原理SSA-SVM-Adaboost 分类预测原理和流程总结 二、实验结果三、核心代码四、代码获取五、总结 一、基本原理 SSA-SVM-Adaboost 分类预测原理和流程 1. 麻雀优化算…

计算机三级 - 数据库技术 - 第十一章 故障管理 笔记

第十一章 故障管理 内容提要: 了解故障管理类型及数据库恢复技术了解数据转储技术了解如何利用日志文件进行数据恢复了解硬件容错方案 11.1 故障管理概述 故障类型及解决方案: 事务内部故障 :导致数据不一致 预期的事务内部故障 : 可通过事…

c++的 stack 和 queue(deque) 和 priority_queue 和 适配器

目录 1.stack和queue 2. queue的介绍和使用 3. priority_queue的介绍和使用 4. 容器适配器 4.1 STL标准库中stack和queue的底层结构 4.2 deque的简单介绍(了解) 4.2.1 deque的原理介绍 4.2.2 deque的缺陷 1.stack和queue 1.1stack 的 结构 1.2 stack 的使用 可以自己查看…

学习Vue3的第四天

目录 pinia 安装 Pinia 存储读取数据 修改数据(三种方式) storeToRefs getters $subscribe store组合式写法 组件通信 props 自定义事件 mitt v-model $attrs $refs、$parent provide、inject slot pinia Pinia 是一个用于 Vue.js 的状态管理库,作…

为工程师构建生成式 AI 应用程序

作为全栈工程师,我们经常需要将后端和前端代码与 AI 模型集成。然而,访问这些模型一直是一项重大挑战。主要障碍之一是缺乏对开放和封闭模型的轻松访问。在 GitHub,我们正在打破访问障碍并推出GitHub Models。让您(开发人员&#…

微服务网关终极进化:设计模式驱动的性能与可用性优化(四)

时间:2024年09月12日 作者:小蒋聊技术 邮箱:wei_wei10163.com 微信:wei_wei10 希望大家帮个忙!如果大家有工作机会,希望帮小蒋推荐一下,小蒋希望遇到一个认真做事的团队,一起努力…

信息安全数学基础(7)最小公倍数

前言 在信息安全数学基础中,最小公倍数(Least Common Multiple, LCM)是一个重要的概念,它经常与最大公约数(Greatest Common Divisor, GCD)一起出现,两者在数论、密码学、模运算等领域都有广泛的…

docker-compose 部署 flink

下载 flink 镜像 [rootlocalhost ~]# docker pull flink Using default tag: latest latest: Pulling from library/flink 762bedf4b1b7: Pull complete 95f9bd9906fa: Pull complete a880dee0d8e9: Pull complete 8c5deab9cbd6: Pull complete 56c142282fae: Pull comple…

黑龙江等保测评:保障数据安全的最佳选择,助力企业无忧发展!

在数字化时代,数据安全已成为企业发展的重中之重。尤其是在黑龙江,随着信息技术的快速发展,数据泄露和网络攻击的风险日益增加。为了帮助企业提升数据安全防护能力,黑龙江等保测评应运而生,成为保障数据安全的有力工具…

DRW的公式推导及代码解析

流程 分阶段指定β值 # 根据当前epoch计算使用的beta值idx epoch // 160 # 每160轮epoch切换一次加权系数betas [0, 0.9999] # 两个beta值beta betas[idx] # 根据idx选择beta值 计算有效样本的权重 对权重进行归一化 (每类权重值 / 权重总和)* …

第7篇:【系统分析师】计算机网络

考点汇总 考点详情 1网络模型和协议:OSI/RM七层模型,网络标准和协议,TCP/IP协议族,端口 七层:应用层,表示层,会话层,传输层,网络层,数据链路层,…

MBD_入门篇_23_SimulinkSinks

23.1 概述 Sink库里面是Simulink的显示或导出信号数据的模块,可以理解为信号的最后接收的模块,要么用于显示要么用于传递给更上层的系统要么终止。 Sink库里面的模块都只有输入,没有输出。 23.2 回顾常用模块 23.2.1 Display 用于实时仿真…

终端文件管理神器 !!!【送源码】

项目简介 nnn是一款专为命令行爱好者打造的高效终端文件管理器。它以其超小的体积、几乎零配置的要求以及卓越的速度表现而著称。nnn不仅适用于Linux、macOS、BSD等操作系统,还能够在诸如树莓派、Android上的Termux、WSL、Cygwin等多个平台运行。它遵循POSIX标准&am…

EPSG 标识符和Web墨卡托投影的关系

Web 墨卡托投影使用修改版的墨卡托投影,并已成为 Web 制图的默认地图投影。此投影的主要区别在于它在所有尺度上都使用球面公式。而墨卡托投影使用与赤道相切的垂直圆柱投影。以下是 Web 墨卡托投影成为 Web 和在线制图事实上的标准的一些原因。 哪些 Web 地图使用 Web Merca…

从 Data 到 Data + AI,必然之路还是盲目跟风?

从 Data 到 Data AI,必然之路还是盲目跟风? 前言从 Data 到 Data AI 前言 数据和人工智能的发展日新月异,深刻地改变着我们的生活和工作方式。数据平台作为数据处理和分析的核心基础设施,也在不断演进和发展。从数据库时代到大…

Linux系统使用Docker安装DockerUI并实现远程管理本地容器无需公网IP

文章目录 前言1. 安装部署DockerUI2. 安装cpolar内网穿透3. 配置DockerUI公网访问地址4. 公网远程访问DockerUI5. 固定DockerUI公网地址 前言 DockerUI是一个docker容器镜像的可视化图形化管理工具。DockerUI可以用来轻松构建、管理和维护docker环境。它是完全开源且免费的。基…

如何用MATLAB搭建ResNet网络(复现论文)

文章目录 前言基础工具网络搭建ResNet网络代码完整代码总结参考文献 前言 之前暑假实习了3个月,后来又赶上开学一堆事,现在终于有时间记录一下学习经历。新的学期开始了,要继续努力。 因为最近要做一个无人机航迹分类的项目,所以…

一周完成计算机毕业设计论文:高效写作技巧与方法(纯干货/总结与提炼)

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

Trie字符串统计(每周一类)

这节课我们学习Trie字符串。这个算法的主要应用就是字符串的快速存储和查找。我们通过下面这个题来讲 Tire字符串统计 ,另外说个题外话,本人是从ACwing里学习的算法知识,希望大家支持一下y总(ACwing大佬),如果觉得我这里的知识讲得…

Unity Apple Vision Pro 开发(十):通过图像识别锚定空间

XR 开发者社区链接: SpatialXR社区:完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 课程试看:https://www.bilibili.com/video/BV1mpH9eVErW 课程完整版,答疑仅社区成员可见,可以通过文章开头的链接加入…