vue2和vue3的区别_vue 3 vue 2-程序员宅基地

技术标签: 前端  vue.js  javascript  

以下总结了vue2和vue3之间几点重大的区别:

一、Composition API

这是vue2.x和vue3.x之间最大的区别。Vue2使用选项类型API(Options API)相比之下,Vue3使用合成型API(Composition API)。

二、vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI 对数据代理。

三、Vue3支持碎片(Fragments)

就是说在组件可以拥有多个根节点。

四、建立数据

Vue2 - 这里把数据放入data属性中。
在Vue3.0,我们就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。

五、生命周期钩子不同 — Lifecyle Hooks

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

六、父子传参不同

七、vue3新增了Teleport瞬移组件

好啦,以上就是vue2.x和vue3.x之间几点重大的区别,感谢阅读。关注我,为你带来更多有用的前端知识。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/guoxuying/article/details/125601454

智能推荐

基于紫光同创FPGA的图像采集及AI加速_《基于紫光同创fpga的图像采集及ai加速》-程序员宅基地

文章浏览阅读1k次。以上为我们的整体设计流程图,我们通过以太网接口、光口、HDMI输入接口以及摄像头接口实现了四路视频采集,其中网口数据是痛过PYTHON上位机传来,光口则是利用光纤回环实现输出,本质上还是通过获取第二个以太网接口的视频数据来实现视频采集输出,对于光口回环,它可以获取摄像头或者时HDMI输入的数据,但会导致视频源重复展示,故使用双网口,并两个网口传输不同视频数据以实现四路不同视频源的识别。右图为MATLAB进行处理后得到的图像,可见实现了图像增强,整体亮度变高,能够更加清晰的看到车辆,为后续识别提供了可能。_《基于紫光同创fpga的图像采集及ai加速》

内省(Inspector)与注解(Annotation)_内省机制-程序员宅基地

文章浏览阅读427次。目录1.内省机制2.内省机制对于属性的操作3.内省属性的注意事项4.注解的功能5.注解声明6.注解修饰目标7.注解生命周期8.注解属性9.注解的使用10.反射对注解的操作1.内省机制 在实际编程中,我们常常需要一些用来包装值对象的类,例如Student、Employee、Order,这些类中往往没有业务方法,只是为了把需要处理的实体对象进行封装,有这样的特征: 属性都是私有的; 有无参的public构造方法; 对_内省机制

Windows 10_x64 PL/SQL 链接64位 Oracle_oraclexe112_win64.zip 云盘-程序员宅基地

文章浏览阅读1.3k次。环境:Windows 10_x64 Oracle11.2XE win_x64PL/SQL Developer 32位过程:1. 首先是Oracle 数据库下载、安装(对于简易版安装,注意记住起始安装的密码,其他的东西基本上下一步下一步就行了)。安装完成后可以在菜单中查找到(运行SQL命令)启动该程序后。登陆前记得使用conn命令。链接数据库。如果需要_oraclexe112_win64.zip 云盘

nokia c503_nokiac503密码可以设置几位-程序员宅基地

文章浏览阅读949次。ovi定位问题:设置--->手机---> 应用程序设置 ---> 定位 定位方法(勾选辅助GPS,集成GPS)定位服务器(自动,接入点CMNET,地址:supl.nokia.com)_nokiac503密码可以设置几位

怎样才能写好项目文档_项目文档怎么写-程序员宅基地

文章浏览阅读1.6k次。怎样才能写好项目文档_项目文档怎么写

电脑计算机简单密码设置方法,电脑开机密码怎么设置,开机密码设置很简单!-程序员宅基地

文章浏览阅读6.4k次。电脑开机密码就像我们手机锁屏密码一样,都是想要自己私密的空间不被侵犯。很多小伙伴的手机都有这是锁屏密码,那么电脑开机密码又是如何设置的呢?如果你不知道如何设置,下面一起看下小编设置电脑开机密码的步骤吧。随着科技的高速发展,电脑隐私成为了我们一个重要的话题点,对于个人隐私内容都不想让同事还是朋友知道,所以往往我们喜欢给电脑设置开机密码。下面小编教你如何设置电脑开机密码,希望能帮助您保护到个人电脑的隐..._开机密码怎么设置电脑开机密码

随便推点

firewall限制或开放IP及端口命令_firewall-cmd --zone=public --list-ports-程序员宅基地

文章浏览阅读1w次,点赞6次,收藏23次。一、查看防火墙状态1、首先查看防火墙是否开启,如未开启,需要先开启防火墙并作开机自启systemctl status firewalld开启防火墙并设置开机自启systemctl start firewalldsystemctl enable firewalld一般需要重启一下机器,不然后面做的设置可能不会生效二、开放或限制端口1、开放端口(1)如我们需要开启XShell连接时需要使用的22端口firewall-cmd --zone=public --add-port=22/tcp _firewall-cmd --zone=public --list-ports

北京交通大学-图像处理与机器学习_北京交通大学图像处理与机器视觉实验代码-程序员宅基地

文章浏览阅读6.7k次,点赞10次,收藏73次。日期项目2022/03/04更新实验环境配置视频P6,第八章后所有内容已同步更新!名称项目课程主页图像处理与机器学习B站主页啥都会一点的研究生课程B站视频【北交】图像处理与机器学习人工智能技术探讨群178174903人工智能技术探讨群2571218304人工智能技术探讨群3584723646课程目录及资料(UP已打包整理支持直链下载)章节内容资料第一章 绪论1-1 基本._北京交通大学图像处理与机器视觉实验代码

本科生如何入门GNSS算法(二)- rtklib定位解算过程中的GNSS数据格式以及基本概念_gnss 观测文件crx-程序员宅基地

文章浏览阅读4.4k次,点赞9次,收藏61次。rtklib定位解算过程中的GNSS数据格式以及基本概念_gnss 观测文件crx

Java maxchars方法_LearningJDK/CharsetEncoder.java at master · sx2714732/LearningJDK · GitHub-程序员宅基地

文章浏览阅读225次。/** Copyright (c) 2000, 2017, Oracle and/or its affiliates. All rights reserved.* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.** This code is free software; you can redistribute it an..._learningjdk如何使用

mfc42.dll文件丢失导致程序无法运行问题-程序员宅基地

文章浏览阅读904次,点赞16次,收藏13次。其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题,如果是新手第一时间会认为是软件或游戏出错了,其实并不是这样,其主要原因就是你电脑系统的该dll文件丢失了或没有安装一些系统软件平台所需要的动态链接库,这时你可以下载这个mfc42.dll文件(挑选合适的版本文件)把它放入到程序或系统目录中,当我们执行某一个.exe程序时,相应的DLL文件就会被调用,因此将缺失的文件放回到原目录之后就能打开你的软件或游戏了.那么出现mfc42.dll丢失要怎么解决?

react中使用svg作为字体图标,使用react-svg组件-程序员宅基地

文章浏览阅读5.8k次,点赞6次,收藏11次。公司一直使用svg作为字体图标,从一开始我使用svg字体图标的方式也是通过img标签引入的,直到最近公司做的业务有个附件预览需求是这样的:展示几种不同的样式,当预览的附件里面没有数据和有数据的时候svg图标展示的样式不一样,鼠标移入的时候,又展示不同的样式图标,一开始感觉就是把所有要展示的svg图标切出来就行了,但是后来发现有几种图标没有,如图,其中的模板有数据时,和鼠标经过-无数据悬停态的时候的svg图标没有,于是我和ui就去要了一下图标,但是ui说svg可以改颜色,并让我按照这个改下就行,不必要_react-svg