每天知识点vue2和vue3的区别
最近发现很多要求Vue3的技术了,不得不说,it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因。
甚至作为一个面试官,只需这一个问题就可以摸清你的水平。
所以了解其区别及背后改变的本质非常重要。
1、vue2 和vue3双向数据绑定原理不同
vue2的数据绑定是利用Object.definePropet()对数据进行劫持 结合 发布订阅模式实现
vue3利用Proxy API对数据代理实现
这第一个区别其实考的就是vue双向绑定的原理,看过vue2源码的同学都知道,v-model的核心其实就是Object.definePropet,监听数据,然后再set。
对这方面没了解的同学建议先深入学习一下v-model双向绑定原理。
那么升级到Vue3之后呢,就不再使用definePropet了,而是改用Proxy这个方法
两者的区别:
defineProperty只能监听某个属性,ProxyAPI可以进行全局监听
proxy可以监听数组,不用单独对数组进行异性操作,可以检测到数组内部的变化
proxy可以直接绑定整个对象,省去for in 闭包等内容来提升效率
2、 vue3默认进行懒观察(lazy observation)。
接上,这是双向绑定的另一个重点之一,观察者模式。
vue2.0中数据一开始就创建了观察者,数据很大的时候,就会出现问题,vue3中进行了优化 只有用于渲染初始化可见部分的数据,才会创建观察者,效率更高。
3、更精准的变更通知
同上 双向绑定模块的一种优化
vue2.x 版本中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;
vue3.x 版本中,只有依赖那个属性的 watcher 才会重新运行
4、vue3.0中加入了typeScript以及PWA的支持
typeScript不必多说,将弱类型的js提升为强类型,使开发更规范,这个react对ts的支持很方便,而现在vue3也吸收进来了。
PWA(Progressive Web App)渐进式Web应用程序,说白了就是让网页开的速度变快,有着跟app相似的功能通知推送。
在vue3中使用pwa非常简单,在使用 vue create projectName 时,选择pwa就可以使用pwa了(其它功能根据自己需要进行选择,本篇只讲在vue-cli3中使用pwa)。
https://blog.csdn.net/qq_40154925/article/details/104384250
5、项目目录结构发生了变化
vue2.x中 移除了配置文件目录,config 和 build 文件夹
vue3.x中 相关的配置需要在根目录中手动创建vue.config.js,比如跨域
这个刚开始可能会有点不习惯,其实大同小异。
6、组件的变化
这应该算是vue3使用者感受到最大的变化了,使用上完全跟Vue2不一样了,基本上都封装在setUp这个方法里面,那么Vue的作者为什么要这么改?能答出这个问题的水平上一个层次。
我们先看使用上的变化:https://zhuanlan.zhihu.com/p/139590941
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghhfh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13