手写mini版本的Vue3--实现 reactive 和 readonly 嵌套对象转换功能

早在 18 年，我就对 Vue 的源码非常感兴趣，无奈当时对其有些畏惧，没敢深入研究，就走了不少弯路。最近，我又重新拾起对 Vue 的学习，同时为了更好地理解 Vue，我决定自己手写一个简化版的 Vue。在手写的过程中，我发现了一些有趣的点，今天，我想和大家分享一下我手写 Vue 的经历，以及我对 Vue 的一些理解。

手写mini-vue的过程和收获

一开始，我想要手写一个完整的 Vue，但是我很快就发现这对于我来说太难了。于是，我决定先从一个简单的例子入手——实现 reactive 和 readonly 嵌套对象转换功能。

reactive 和 readonly 是 Vue 中非常重要的两个概念。reactive 表示对象是响应式的，这意味着当对象的属性发生变化时，视图也会自动更新。readonly 表示对象是只读的，这意味着对象不能被修改。

为了实现 reactive 和 readonly，我首先需要创建一个 Observer 类。Observer 类负责观察对象的属性变化，并在属性变化时通知视图更新。然后，我需要创建一个 Compiler 类。Compiler 类负责将模板编译成渲染函数。最后，我需要创建一个 Vue 实例。Vue 实例负责将数据和视图绑定在一起。

经过一番努力，我终于完成了手写 Vue 的第一个例子。虽然这个例子很简单，但是它让我对 Vue 的工作原理有了更深入的了解。

手写 Vue 的过程也让我收获了很多。我学到了如何设计一个响应式系统，如何将模板编译成渲染函数，以及如何将数据和视图绑定在一起。这些知识对我来说非常宝贵，我相信它们会在我的职业生涯中发挥很大的作用。

对 Vue 的一些理解

通过手写 Vue，我对 Vue 有了更深入的理解。我发现 Vue 是一个非常灵活的框架。它可以轻松地与其他框架集成，并且可以用于构建各种各样的应用程序。

Vue 的核心是响应式系统。响应式系统使得 Vue 能够自动跟踪数据的变化，并在数据变化时更新视图。这使得 Vue 非常适合构建动态应用程序。

Vue 的另一个优点是它的模板系统。Vue 的模板系统非常强大，它允许开发者使用 HTML 语法来编写模板。这使得 Vue 的学习曲线非常低，即使是前端开发新手也可以轻松上手。

总的来说，Vue 是一个非常优秀的框架。它灵活、强大，而且学习曲线低。我相信 Vue 会在未来几年继续保持其流行趋势。