位置: IT常识 - 正文

vue2和vue3的区别(由浅入深)(vue2和vue3的区别大么)

编辑:rootadmin
vue2和vue3的区别(由浅入深) 前言

推荐整理分享vue2和vue3的区别(由浅入深)(vue2和vue3的区别大么),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2和vue3的区别大不,vue2和vue3的区别面试题,vue2和vue3的区别以及发生的哪些变化,vue2和vue3的区别简答,vue2和vue3的区别大么,vue2和vue3的区别大不,vue2和vue3的区别大不,vue2和vue3的区别面试题,内容如对您有帮助,希望把文章链接给更多的朋友!

vue2和vu3之前的区别,一直以来是面试必考题目,如何回答,回答的层次决定了面试者的对于vue2,3的理解,以及对于vue3目前稳定版本发展的方向的了解,即考察使用程度,又考察了学习能力,可以说是回答即可以很简单,也可以很不简单,这里需要注意的是面试官的面试程度,需要我们层层递进,由浅入深来回答,这样可以体现出面试者的考虑全面,又能体现知识广度。简而言之,vue2升级vue3之后变得更快,更轻,协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化,但是本质区别是什么,下面分为几个部分进行讲解。

 vue2 vs 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指令,等等,不仅我们开发起来更加的便捷,减少 了内存消耗,也同时减少了⽤户加载时间,优化⽤户体验。

生命周期

引用掘金图片如下:

获取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和vue3的区别(由浅入深)(vue2和vue3的区别大么)

Vue2:

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

Vue3:

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

给父组件传值emitvue2: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 })。

组件通信

注意

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 注意是route route.params //获取query route.query return { 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(){ //获取params this.$route.params //获取query this.$route.query }}</script> 总结

vue2和vue3比较还是有很多不一样的地方,比如setup语法糖的形式最为便捷而且更符合开发者习惯,未来vue3将会大面积使用这种规则,这样更加符合开发习惯和降低后续维护的成本,还有目前Vue3已经成为了Vue的默认版本,后续维护应该也会以Vue3为主。希望各位同学赶紧学起来吧~

  
本文链接地址:https://www.jiuchutong.com/zhishi/300589.html 转载请保留说明!

上一篇:图像工程:红外图像增强(红外图像识别算法)

下一篇:Vue中的v-for循环,实现div块的循环生成(vue里的for循环)

  • 大多数买你产品的,其实并不是你的粉丝(大部分商品都可以买到,但价格昂贵)

    大多数买你产品的,其实并不是你的粉丝(大部分商品都可以买到,但价格昂贵)

  • 微信视频怎么保存到手机相册里(微信视频怎么保存到u盘里)

    微信视频怎么保存到手机相册里(微信视频怎么保存到u盘里)

  • 抖音的作品怎么删除(抖音的作品怎么置顶呢)

    抖音的作品怎么删除(抖音的作品怎么置顶呢)

  • 京造和京选区别(京造是什么牌子)

    京造和京选区别(京造是什么牌子)

  • 华为p30支持wifi6吗(华为P30支持无线充电吗)

    华为p30支持wifi6吗(华为P30支持无线充电吗)

  • 滴滴分数低接不到单怎么办(滴滴车主分数低接不到单怎么办)

    滴滴分数低接不到单怎么办(滴滴车主分数低接不到单怎么办)

  • 抖音作品怎样设置不让别人下载(抖音作品怎样设置所有人可见)

    抖音作品怎样设置不让别人下载(抖音作品怎样设置所有人可见)

  • 6s可以升级13.5吗(6s能升级ios13)

    6s可以升级13.5吗(6s能升级ios13)

  • 分辨率多少算高清(电脑分辨率多少算高)

    分辨率多少算高清(电脑分辨率多少算高)

  • 音频连接是什么意思(音频连接方式哪种好)

    音频连接是什么意思(音频连接方式哪种好)

  • 1200w和1500w电机区别(1200w和1500w电机续航)

    1200w和1500w电机区别(1200w和1500w电机续航)

  • 佳能开机键在哪(佳能咋开机)

    佳能开机键在哪(佳能咋开机)

  • 华为5g与高通5g区别(华为5g和高通5g)

    华为5g与高通5g区别(华为5g和高通5g)

  • 上海12123为什么一直显示繁忙(上海12123服务异常怎么解决)

    上海12123为什么一直显示繁忙(上海12123服务异常怎么解决)

  • 在哪里看微信被禁原因(在哪里看微信被拉黑的人)

    在哪里看微信被禁原因(在哪里看微信被拉黑的人)

  • 苹果怎么下载2个微信(苹果怎么下载233乐园正版)

    苹果怎么下载2个微信(苹果怎么下载233乐园正版)

  • 三星g9730是什么版本(三星g9738是什么型号)

    三星g9730是什么版本(三星g9738是什么型号)

  • word选项的高级在哪里(word选项的高级设置无法保存)

    word选项的高级在哪里(word选项的高级设置无法保存)

  • 华为mate30pro导航键怎么设置(华为mate30pro导航声音怎么调)

    华为mate30pro导航键怎么设置(华为mate30pro导航声音怎么调)

  • 如何听到对方打电话的内容(如何听到对方打呼噜声)

    如何听到对方打电话的内容(如何听到对方打呼噜声)

  • 小米5和6的区别(小米5跟小米6的区别)

    小米5和6的区别(小米5跟小米6的区别)

  • 通话中断痕迹怎么删除(通话中断怎么恢复)

    通话中断痕迹怎么删除(通话中断怎么恢复)

  • 拼多多揽收超时怎么办(拼多多揽收超时1小时)

    拼多多揽收超时怎么办(拼多多揽收超时1小时)

  • 魅族live什么水平(魅族live手机推得动吗)

    魅族live什么水平(魅族live手机推得动吗)

  • 微信视频如何美颜(微信视频如何美颜vivo)

    微信视频如何美颜(微信视频如何美颜vivo)

  • 小程序和H5页面的相互跳转(小程序和h5页面的区别)

    小程序和H5页面的相互跳转(小程序和h5页面的区别)

  • 已交税金是什么类
  • 消费型增值税的含义
  • 印花税包括几个税种
  • 专票待认证
  • 计提固定资产折旧会计凭证
  • 国有股权无偿划转协议
  • 增值税电子普通发票怎么作废
  • 非居民企业转让财产所得税
  • 无形资产摊销和累计摊销一样吗
  • 增值税发票丢了怎么补开
  • 承包工程会计账务处理流程
  • 个贷系统平账户
  • 员工罚款如何入账
  • 短期借款计提利息例题
  • 金蝶软件钩稽怎么操作
  • 出口退税是按进项税额吗
  • 小型微利企业所得税减免政策
  • 零售超豪华小汽车交消费税吗
  • 托儿所幼儿园卫生保健工作规范2022
  • 收据能入账抵税吗
  • 分步法所分的成本计算步骤应是实际的生产步骤
  • 固定资产的领用
  • 跨区域个人所得税延期情况说明
  • 纳税人拒绝代扣代缴,扣缴义务人应当
  • 补领以前月份的工资如何计算个人所得税?
  • 集团内部资金往来用什么科目核算
  • 企业分红的会计科目
  • PHP:pg_send_query_params()的用法_PostgreSQL函数
  • 房产无偿过户给朋友能让他还吗?
  • php生成时间戳
  • VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)
  • 下一页分页符中间空白页
  • 使用vue搭建项目
  • 企业安全生产费用不得出现赤字
  • 购买房屋缴纳的税款
  • thinkphp yii
  • vue面试题简书
  • 固定资产多少金额才算
  • markdown小小白常用语法
  • 增值税发票上多了一个点能刮掉吗
  • 外聘人员差旅费怎么做账
  • 商业收入税收怎么收费
  • 劳务派遣差额征税政策
  • sql语句求中位数
  • datatable怎么用
  • access speed
  • mysql error!
  • 房地产按揭贷款政策
  • 什么情况下增值税计入成本
  • 现金折扣可以扣除吗
  • 城市生活垃圾处理费征收管理办法
  • 物流报关什么意思
  • 去年未分配利润 负数 结转今年
  • 固定资产报废的账务处理
  • 冲个人借款分录怎么写
  • 赔付支出包括
  • 没有水电费发票可以入账吗
  • 征税体制
  • 出口退税过期怎么处理
  • 买钢管扣件
  • 应发和实发工资账务处理
  • mysql图形
  • sqlserver 修改列类型
  • win10预览版21277
  • 注册表被锁定后的处理方法
  • 如何关掉数据
  • 图解在OS X中管理窗口大小的多种方法
  • centos6.10安装教程
  • winxp如何打开控制面板
  • linux各种命令
  • windows where命令
  • python虚拟环境管理
  • vue 瀑布流
  • cmd更改文件属性
  • jquery中validate
  • android百分比布局
  • unity获取当前位置
  • 小规模纳税人忘记作废发票导致超过免税范围
  • 城乡居民医疗保险和新农合的区别
  • 河北省税务局对外公开电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设