先导篇：先把vue2吃了，再啃vue3，少走弯路

前言

最近看到网上有人讨论说，要啃 vue3 要先看源码，感觉现在出现了一个问题：随着前端组件库、框架版本越来越多，很多同学开始舍不得放弃旧的版本而不想升级。

vue.js 的生态真的挺强大，这归功于 vue.js 的出现，重新拾起对前端技术的一些兴趣，觉得前端技术终于“好玩”起来了。

但还是避免不了升级换代，那先啃个源码？源码真的那么香吗？

Vue.js 3.0 的新特性和改进

Vue.js 3.0 有很多新特性和改进，包括：

• Composition API ：Composition API 是 Vue.js 3.0 中的一个新特性，它允许您以一种更灵活的方式组织和重用组件逻辑。
• Teleport ：Teleport 是 Vue.js 3.0 中的一个新特性，它允许您将组件渲染到文档中的另一个位置。
• Suspense ：Suspense 是 Vue.js 3.0 中的一个新特性，它允许您在等待异步数据时显示占位符组件。
• Fragments ：Fragments 是 Vue.js 3.0 中的一个新特性，它允许您在不创建额外 DOM 元素的情况下组合组件。

先啃个源码？

技术人嘛，当然要一探究竟，啃源码啥的肯定要试一试，我也去看了下 Vue.js 3.0 的源码，这个代码注释还是写的真多，一下午的时间我就粗略的过了一遍 reactive 和 runtime-core 这两个包。

现在对于 vue2 和 vue3 的差别，在心里算是能有个谱了。总结下来，总共有以下几点：

1. vue3 把 vue2 的 options api 和 render function 分为了两个部分。
2. vue3 不再需要 this.$attrs 和 this.$listeners。
3. vue3 的 props 不再是对象，而是一个函数。
4. vue3 的 data 不再是对象，而是一个函数。
5. vue3 的 methods 不再是对象，而是一个函数。
6. vue3 的 computed 不再是对象，而是一个函数。
7. vue3 的 watch 不再是对象，而是一个函数。
8. vue3 的 lifecycle hooks 不再是对象，而是一个函数。

少走弯路

首先，如果您是一个前端开发新手，那么我建议您先学习 Vue.js 2.x。Vue.js 2.x 已经非常成熟，并且有很多学习资源可供选择。

其次，如果您已经对 Vue.js 2.x 有了一定的了解，那么您就可以开始学习 Vue.js 3.0 了。Vue.js 3.0 的新特性和改进可以帮助您开发出更强大的应用程序。

最后，如果您想深入了解 Vue.js 的实现原理，那么您可以阅读 Vue.js 3.0 的源码。不过，在阅读源码之前，我建议您先阅读 Vue.js 3.0 的官方文档和一些相关博客文章。

希望这篇文章能帮助您更好地理解 Vue.js 3.0 的优化。如果您有任何问题，请随时留言。