vue3响应式（vue3响应式对象）

本文目录一览：

• 1、vue3.0的proxy响应式原理简单实现
• 2、vue3响应式数据原理
• 3、vue3修改响应式代理值

vue3.0的proxy响应式原理简单实现

1、vue0 使用proxy代替了vue0版本中的defineProperty，首先利用compositionAPI中的 reactive() 函数返回一个proxy对象，使得数据可监测 target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

2、Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：reactive：接收一个参数，判断这参数是否是对象。

3、vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的push/pop/shift/unshift/splice/sort/reverse七个方法，其他数组方法及数组的使用则无法检测到。

4、vue0中的响应式原理是基于proxy做的，而使用proxy的前提是，我们要代理的是对象而不是基本类型数据。

5、在Vue 中，数据模型下的所有属性，会被 Vue 使用 Object.defineProperty (Vue0 使用 Proxy)进行数据劫持代理。

6、vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

vue3响应式数据原理

1、Effect 原理解析 与 实现 引言：vue、react 框架的核心都是数据驱动视图也就是model = view，实现的核心也就是 数据响应。

2、Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：reactive：接收一个参数，判断这参数是否是对象。

3、vue响应式数据原理是利用Object。defineProperty这个API来实现，该API可以监听对象属性的get和set，当对象属性被调用时，它能够自动触发更新视图。Vue的响应式实现，便是通过使用Object。

vue3修改响应式代理值

字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等 import { ref } from vue// “ref”是用来存储值的响应式数据源。

修改时：state.num = 100 就会触发 set 函数。以下是这两个函数的核心（TS语法）：对于 get 函数来说，获取值肯定是最核心的一步骤了。接下来是调用 track，这个和 effect 有关，下文再说。

经过对组件实例的解析操作，最终拿到的dataOptions即我们实例中的data函数。