vue2和vue3的区别整理（面试这一篇就够了）
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue2和vue3的区别
本文章将从源码层面、性能层面、api方面、hook函数增加代码复用性、代码写法方面、生命周期方面等6个方面简单描述vue2和vue3的区别
源码层面：
| 版本 | 区别 |
|---|---|
| vue2 | javascript 使用flow进行类型检测 |
| vue3 | 源码使用typescript进行重构，vue对typescript支持更加友好了 |
性能层面
| 版本 | 区别 |
|---|---|
| vue2 | 使用object.defineProperty来劫持数据的setter和getter方法，对象改变需要借助api去深度监听 |
| vue3 | 使用Proxy来实现数据劫持，删除了一些api($on,$once,$off) fiter等，优化了Block tree,solt,diff 算法等 |
api方面
| 版本 | 区别 |
|---|---|
| vue2 | OptionsAPI 在options里写data,methods,created等描述组件对象，多个逻辑可能在不不同地方，代码内聚性低 |
| vue3 | CompositionAPI 将模块相关代码统一放在一个地方处理，不需要在多个options里查找 |
hook函数增加代码复用性- vue2使用mixins进行代码逻辑共享，mixins也是由一大堆options组成，如果有多个mixins则可能造成命名冲突等问题。
- vue3可以通过hook函数 将一部分独立的逻辑抽离出去，并且也是响应式的
代码写法方面- vue3支持在template中写多个根，vue2只能有一个
- 当内部有异步函数，需要使用到await的时候，可以直接使用，不需要在setup前面加async
生命周期方面（大多生命周期前加on）
| vue2 | vue3 | 生命周期 |
|---|---|---|
| beforeCreate() | setup() | 组件开始创建数据实例之前 |
| created() | setup() | 组件数据创建数据实例完成 |
| beforeMount() | onBeforeAMount() | DOM挂载之前 |
| mounted() | onMounted() | DOM挂载完成（页面完成渲染） |
| beforeUpdate() | onBeforeUpdate() | 组件数据更新之前 |
| undated() | onUpdated() | 组件数据更新之后 |
| beforeDestroy() | onBeforeunmount() | 组件销毁之前 |
| destroyed() | onUnmounted() | 组件销毁之后 |
- 总结：
- vue3，使用率逐年升高，版本目前很稳定，生态也比较完善，将会vue未来发展的主要趋势
- vue3性能以及typescript的支持性也超越vue2
- ts目前在前端也比较受欢迎，建议入坑
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
23
0- 0
已为社区贡献1条内容
所有评论(0)