位置: 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循环)

  • 法人能去税务局买票吗
  • 企业所得税年报怎么查询
  • 企业所得税中的所得
  • 网约车有电子发票吗
  • 财务上大写的元怎么写
  • 预收账款借方余额可以计入应收账款的哪方
  • 统驭科目的作用
  • 汇款出国规定
  • 土地结转会计分录是什么
  • 计提劳务成本月末需要结转吗
  • 收到运输发票需要开票吗
  • 滞留票是什么意思
  • 发票勾选可以勾选几次
  • 案例讲解:将自己的房产用于办公使用,在税收的缴纳中该如何把控?
  • 餐饮发票可以抵扣成本吗
  • 企业采购设备有哪几种情形
  • 可供出售金融资产新准则叫什么
  • 当月没有进项税额抵扣怎么办
  • 更改onedrive文件夹位置
  • 查看修改
  • php中数组的常用函数及用法
  • macbook panic cpu caller
  • 电脑麦克风没声音是什么原因
  • wifi万能钥匙密码王
  • 期间费用核算内容包括
  • 所有者权益类的期末余额公式
  • 出现巨石
  • 阿尔瓦罗西萨
  • 应收票据终止确认的情形
  • php无限级分类
  • 调整以前年度损益调整分录费用调增
  • json字符串转json js
  • phpcms教程
  • 物料最低库存
  • 所得税主要特点有
  • 先开发票后收款可以合并做账吗
  • 3步搞定纯真ip数量
  • 建设工程审计报告包括哪些内容
  • 股东增资涉税
  • 费用票必须是公司发票吗
  • mac下安装mysql
  • 业务招待费的进项票可以抵扣吗
  • 计提和实际发放的区别
  • 未开票收入如何记账
  • 金税盘注册码怎么查
  • 免税收入不征税收入计入收入总额吗
  • 不良资产处置公司违法吗
  • 研发费用归集的主要范围有哪些
  • 不动产进项税额分期抵扣暂行办法还有效吗
  • 软件开发的账务处理
  • 收到银行的贷款怎么做会计分录
  • 现金比率的计算公式是什么意思
  • 待抵扣进项税额和待认证进项税额的区别
  • 模具维修费用清单表格
  • 短期借款不超过几年
  • 房屋租赁产生的税费叫什么
  • 加油票抬头开错了
  • 认证系统维护费可以全额抵扣吗
  • 如何解绑企业微信绑定的邮箱
  • 企业无形资产入账标准
  • sql server233错误
  • 文档介绍
  • KunlunPlatform.exe是什么进程?KunlunPlatform.exe是安全的程序吗?
  • ssd安装centos7
  • scheduler.exe - scheduler是什么进程 有何作用
  • win8打开ie
  • win7开始菜单没有搜索框
  • 使用css实现全兼容的方法
  • cocos2dx android横屏竖屏设置
  • python 继承
  • android framework 框架层功能梳理
  • js函数的使用规则
  • javascript取随机数
  • js的navigator
  • 已抵扣过的进项怎么做账
  • 税务人的形象
  • 报税时一直显示申报中
  • 财税库银是什么税
  • 开票盘注销后能否撤回
  • 税法上接受捐赠是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设