对vue响应式数据的理解（vue基础，面试，源码级讲解）

首先我们要知道哪些数据可以劫持。 

1.  是否可以劫持：

   • 在JavaScript等动态语言中，字符串和数字虽然是基本数据类型（也称为原始数据类型），但它们可以包装成对象（如String对象和Number对象）进行处理。当它们被包装成对象后，就可以使用对象的方法，包括Object.defineProperty等方法进行数据劫持。
   • 但需要注意的是，对于原始数据类型（未包装成对象时），无法直接应用Object.defineProperty等方法进行劫持。这是因为原始数据类型不是对象，没有属性可以定义或修改。

vue2的简单实现：

（我会在下一篇文章中讲到在vue2中对数组的检测变化）

 讲解：

当定义了一个data数据，首先将数据传入observer方法中，将对象中的每一项键值对取出调用defineReactive方法。

在defineReactive中，递归遍历值，直到数据为基本数据类型。使用Object.defineProperty（原数据，键，{ getset方法 }）对数据中的键添加get和set方法，实现数据劫持。

vue3的简单实现：

 讲解：

当定义了一个obj数据，首先将数据传入reactive方法中，在方法中使用Proxy对数据进行劫持，添加getset方法。当数据中的属性每调用时，会执行get方法，从原数据中找到对应的值，判断该值是否为object类型，如果是，再次用Proxy对该值进行数据劫持；如果不是，则返回值。

这种方法，实现了对数据的懒代理，如果我没有去取对象中的数据（结合案例，指obj.n中的值），那么该对象就不会被代理（结合案例，指obj.n）。