从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了，所以写了这篇文章对Vue2和Vue3做了一个对比总结，一是为了对这段时间使用Vue3开发做些记录，二是为了帮助更多的小伙伴更快的上手Vue3。
本篇文章主要采用选项式Api，组合式Api，setup语法糖实现它们直接的差异
首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别
- 选项式Api
- 组合式Api
- setup 语法糖
总结：
选项式Api是将data和methods包括后面的watch，computed等分开管理，而组合式Api则是将相关逻辑放到了一起（类似于原生js开发）。
setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。
我们都知道在选项式api中，data函数中的数据都具有响应式，页面会随着data中的数据变化而变化，而组合式api中不存在data函数该如何呢？所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据
- 组合式Api
- setup语法糖
总结：
使用ref的时候在js中取值的时候需要加上.value。
reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
下表包含：Vue2和Vue3生命周期的差异
举个常用的onMounted的例子
- 选项式Api
- 组合式Api
- setup语法糖
从上面可以看出Vue3中的组合式API采用hook函数引入生命周期；其实不止生命周期采用hook函数引入，像watch、computed、路由守卫等都是采用hook函数实现
总结
Vue3中的生命周期相对于Vue2做了一些调整，命名上发生了一些变化并且移除了beforeCreate和created，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们。
生命周期采用hook函数引入
- 选项式API
- 组合式Api
- setup语法糖
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/32795.html