总结工作中vue2和vue3的知识点区别

news/2024/5/30 1:33:41/文章来源:https://blog.csdn.net/qq_45432996/article/details/136582427

vue2和vue3的区别

前言

vue2升级vue3之后变得更快,更轻,协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化,但是本质区别是什么,下面分为几个部分进行讲解。

vue2和vue3

对比vue2vue3
脚手架命令式可视化创建脚⼿架
组件通信见下文见下文
数据监听watch,computedwatch,watchEffect,computed
双向绑定Object.definePropertyProxyAPI
⽣命周期见下文见下文
api选项式组合式

一、双向绑定更新

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。

这⾥是相⽐于vue2版本,使⽤proxy的优势如下
1.defineProperty只能监听某个属性,不能对全对象监听 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
2.可以监听数组,不⽤再去单独的对数组做特异步操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听。

二、实例化

Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实⽆论你⽤到还是没⽤到,都会跑⼀遍,这样不仅提⾼了性能消耗,也⽆疑增加了⽤户加载时间。

⽽vue3.0中可以⽤ES module imports按需引⼊,如:keep-alive内置组件、v-model指令,等等,不仅我们开发起来更加的便捷,减少 了内存消耗,也同时减少了⽤户加载时间,优化⽤户体验。

三、生命周期

vue2vue3描述
beforeCreatesetup实例创建前
createdsetup实例创建后
beforeMountonBeforeMountDOM挂载前调用
mountedonMountedDOM挂载完成调用
beforeUpdateonBeforeUpdate数据更新前调用
updatedonUpdated数据更新后调用
beforeDestoryonBeforeUnmount组件销毁前调用
destoryedonUnmounted组件销毁完调用

四、获取props

vue2在script代码块可以直接获取props,vue3通过setup指令传递

vue2:console.log(‘props’,this.xxx)
vue3:setup(props,context){ console.log(‘props’,props) }

五、数据和方法的定义

Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是合成型API(Composition API)

Vue2:

data() { return {}; }, methods:{ }

Vue3:

数据和⽅法都定义在setup中,并统⼀进⾏return{}

六、给父组件传值emit

vue2:this.$emit()
vue3:setup(props,context){context.emit()}

七、watchEffect

Vue3中除了watch,还引入了副作用监听函数watchEffect,用过之后我发现它和React中的useEffect很像,只不过watchEffect不需要传入依赖项。

那么什么是watchEffect呢?

watchEffect它会立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。

computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并,当任何你有用到的响应式依赖更新时,该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行,即({ immediate: true })。

八、组件通信

方式Vue2Vue3
父传子propsprops
子传父$emitemits
父传子$attrsattrs
子传父$listeners无(合并到attrs方式)
父传子provideprovide
子传父injectinject
子组件访问父组件$parent
父组件访问子组件$children
父组件访问子组件$refexpose&ref
兄弟传值EventBusmitt
注意
props中数据流是单项的,即子组件不可改变父组件传来的值
在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

九、路由

vue3和vue2路由常用功能只是写法上有些区别:

vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的;大家都知道setup中组件实例已经创建,是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的,此时组件还未创建,所以是无法用在setup中的;如果想在setup语法糖中使用则需要再写一个script 如下:

<script>
export default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},
};
</script>

vue3路由写法:

<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发next()       }),beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发next()      }),setup() {const router = useRouter()const route = useRoute()const toPage = () => {router.push(xxx)}//获取params 注意是routeroute.params//获取queryroute.queryreturn {toPage}},
});
</script>

vue2写法:

<script>
export default {beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发next()       }),beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发next()      }),methods:{toPage(){//路由跳转this.$router.push(xxx)}},created(){//获取paramsthis.$route.params//获取querythis.$route.query}
}
</script>

十、进阶内容:

1.vue3不推荐使用mixin进行复用逻辑提取,而实推荐写成hook
2.v-model应用在组件时,监听的事件和传递的值的改变
3.vue3并不是完全抛弃了defineproperty,通过reactive定义的响应式数据使用propxy包装出来的,而ref还是用的definproperty去给一个而空对象,定义了一个value属性来做响应式

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

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

相关文章

[Kali] 安装Nessus及使用

在官方网站下载对应的 Nessus 版本:Download Tenable Nessus | TenableDownload Nessus and Nessus Managerhttp://www.tenable.com/products/nessus/select-your-operating-system这里选择 Kali 对应的版本 一、安装 Nessus 1、下载得到的是 deb 文件,与

html5cssjs代码 018颜色表

html5&css&js代码 018颜色表 一、代码二、效果三、解释 这段代码展示了一个基本的颜色表&#xff0c;方便参考使用&#xff0c;同时也应用了各种样式应用方式。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><title>编程笔记…

ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。

发生的错误信息&#xff1a; File "C:\Users\malongqiang\.conda\envs\ObjectDetection\lib\ssl.py", line 1309, in do_handshakeself._sslobj.do_handshake() ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。 分析原因&#xff1a; …

2024年了,关键词还重要吗?(川圣SEO)蜘蛛池

baidu搜索:如何联系八爪鱼SEO? baidu搜索:如何联系八爪鱼SEO? baidu搜索:如何联系八爪鱼SEO? 是的&#xff0c;关键词仍然非常重要。 无论在哪个年份&#xff0c;关键词都是搜索引擎优化&#xff08;SEO&#xff09;的重要组成部分&#xff0c;它们帮助搜索引擎理解网页…

电源常用电路—驱动电路详解

数字电源控制核心对输入输出参数进行采集后&#xff0c;利用控制算法进行分析从而产生PWM控制信号&#xff0c;PWM信号将经过驱动电路的进行功率放大和隔离&#xff0c;随后接入功率开关器件从而完成电源的输出控制。本篇将主要针对电源的驱动电路进行讲解。 一、驱动电路概述…

【论文阅读】

4. Analysis of Large-Scale Multi-Tenant GPU Clusters for DNN Training Workloads 出处&#xff1a;2019 USENIX-TAC 大规模多租户GPU集群对DNN训练工作负载的分析 主要工作&#xff1a;描述了Microsoft中一个多租户GPU集群两个月的工作负载特征&#xff0c;研究影响多租户…

WanAndroid(鸿蒙版)开发的第五篇

前言 DevEco Studio版本&#xff1a;4.0.0.600 WanAndroid的API链接&#xff1a;玩Android 开放API-玩Android - wanandroid.com 其他篇文章参考&#xff1a; 1、WanAndroid(鸿蒙版)开发的第一篇 2、WanAndroid(鸿蒙版)开发的第二篇 3、WanAndroid(鸿蒙版)开发的第三篇 …

[云原生] Prometheus自动服务发现部署

一、部署服务发现 1.1 基于文件的服务发现 基于文件的服务发现是仅仅略优于静态配置的服务发现方式&#xff0c;它不依赖于任何平台或第三方服务&#xff0c;因而也是最为简单和通用的实现方式。 Prometheus Server 会定期从文件中加载 Target 信息&#xff0c;文件可使用 YAM…

<JavaEE> 了解网络层协议 -- IP协议

目录 初识IP协议 什么是IP协议&#xff1f; IP协议中的基础概念 IP协议格式 图示 4bit版本号&#xff08;version&#xff09; 4bit头部长度&#xff08;headerlength&#xff09; 8bit服务类型&#xff08;TypeOfService&#xff09; 16bit总长度&#xff08;total l…

Python Web开发记录 Day10:Django part4 靓号管理与优化

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、数据库准备2、靓号列表3、新建靓号4、编辑靓…

点胶缺陷视觉检测都是怎么检测的?

点胶工艺是许多工业生产中不可或缺的一环&#xff0c;而点胶缺陷的存在往往直接影响到产品质量。为了提升点胶工艺的品质控制&#xff0c;点胶缺陷的视觉检测成为了一个重要的技术手段。 一、点胶缺陷的类型 点胶缺陷主要包括胶点大小不均、位置偏移、漏点、多点等。这些缺陷如…

基于word2vec 和 fast-pytorch-kmeans 的文本聚类实现,利用GPU加速提高聚类速度

文章目录 简介GPU加速 代码实现kmeans聚类结果kmeans 绘图函数相关资料参考 简介 本文使用text2vec模型&#xff0c;把文本转成向量。使用text2vec提供的训练好的模型权重进行文本编码&#xff0c;不重新训练word2vec模型。 直接用训练好的模型权重&#xff0c;方便又快捷 完整…

selenium 网页自动化-在访问一个网页时弹出的浏览器窗口,我该如何处理?

前言 相信大家在使用selenium做网页自动化时&#xff0c;会遇到如下这样的一个场景&#xff1a; 在你使用get访问某一个网址时&#xff0c;会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而&#xff0c;很不幸&#xff0c;Alert类处理的结果就是没…

springboot273基于JavaWeb的宠物商城网站设计与实现

宠物商城网站的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;商品信息因为其管理内容繁杂&#xff0c;管理数量繁多导…

留学生课设|R语言|研究方法课设

目录 INSTRUCTIONS Question 1. Understanding Quantitative Research Question 2. Inputting data into Jamovi and creating variables (using the dataset) Question 3. Outliers Question 4. Tests for mean difference Question 5. Correlation Analysis INSTRUCTIO…

Elasticsearch:调整近似 kNN 搜索

在我之前的文章 “Elasticsearch&#xff1a;调整搜索速度”&#xff0c;我详细地描述了如何调整正常的 BM25 的搜索速度。在今天的文章里&#xff0c;我们来进一步探讨如何提高近似 kNN 的搜索速度。希望对广大的向量搜索开发者有一些启示。 Elasticsearch 支持近似 k 最近邻…

C#,数值计算,数据测试用的对称正定矩阵(Symmetric Positive Definite Matrix)的随机生成算法与源代码

C.Hermite 1、对称矩阵 对称矩阵(Symmetric Matrices)是指以主对角线为对称轴,各元素对应相等的矩阵。在线性代数中,对称矩阵是一个方形矩阵,其转置矩阵和自身相等。1855年,埃米特(C.Hermite,1822-1901年)证明了别的数学家发现的一些矩阵类的特征根的特殊性质,如称为埃…

Selenium 学习(0.20)——软件测试之单元测试

我又&#xff08;浪完&#xff09;回来了…… 很久没有学习了&#xff0c;今天忙完终于想起来学习了。没有学习的这段时间&#xff0c;主要是请了两个事假&#xff08;5工作日和10工作日&#xff09;放了个年假&#xff08;13天&#xff09;&#xff0c;然后就到现在了。 看了下…

15届蓝桥杯第一期模拟赛所有题目解析

文章目录 &#x1f9e1;&#x1f9e1;t1_字母数&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t2_大乘积&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t3_星期几&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;…

ctfshow web入门 php特性总结

1.web89 intval函数的利用&#xff0c;intval函数获取变量的整数值&#xff0c;失败时返回0&#xff0c;空的数组返回&#xff0c;非空数组返回1 num[]1 intval ( mixed $var [, int $base 10 ] ) : int Note: 如果 base 是 0&#xff0c;通过检测 var 的格式来决定使用的进…