本文将会比较Vue3中`ref` 和 `reactive的使用方式、优缺点和适用场景，并对原理进行分析。

vue3.4后,在表单元素的双向绑定依旧是使用v-model,在自定义组件中使用v-model时,在子组件中直接使用defineModel就能读取和修改父组件中的值

在我们平时使用各种框架的时候，都避免不了使用到一种特性，就是 生命周期 钩子，这些钩子，可以给我们提供很多便利，让我们在数据更新的每一个阶段，都可以捕捉到它的变化。 这张图其实已经大概的告诉了我们，每个阶段做了什么，但是我觉得还有必要详细的去分析一下，这样在未来如果我们要实现类…

但是当我们打开 vue3 的源码之后你会发现，代码量是如此之多。这个源码到底该从何读起。虽然 vue3 代码的可读性是很高的，但是架不住代码量大呀！！！ 就是自己把功能实现一遍，这对于我自己的收获也是巨大的。因为你要想实现这个功能的话，你必须要先理解，然后才可以把代码写出来。 …

继 Angular 和 React 之后，尤大在 2016 年发布了如今“前端三剑客”之一的 Vue 2.0，并凭借其简单易用、轻量高效的特点受到了广泛的欢迎，特别

前言 这是vue3系列源码的第五章，使用的vue3版本是3.2.45。这一章，我们将看一下ref,reactive函数是如何定义响应式数据的。

另外，让我们首先介绍一下与 ref 非常相似的函数 shallowRef，因为它们的实现方式非常相似，我们将它们放在一起讨论 这两个函数在代理基本数据类型时没有区别，但它们的区别在于如何代理复杂数据类

在上一章中，我们介绍了ref，如果仔细看过，想必对ref应该已经了如指掌了。如果还没有，或着忘记了....可以先回顾一下上篇文章。 reactive这个文件代码其实不多，100 来行，很多逻辑其实是在handlers跟effect中。我们先看这个文件的引入： 所以不用怕，很多只…

最新的 effect API、watch API、组件更新函数都是通过 ReactiveEffect 类来实现的，都是利用了 ReactiveEffect 类中的 run 方法执行副作用函数及可以通过