1、Vue3 使用了 Proxy 替换了原来的 ObjectdefineProperty 来实现数据响应很简单，直接Vue引入reactive方法，接收一个对象参数，就实现了数据的响应式reactive 内部的核心代码 简化 如下首先判断传入的参数类型是否可以。

2、语法const xxx = ref initValue 接受的数据类型基本类型，引用类型 作用把参数加工成一个响应式对象，全称为reference对象我们下面一律简称为ref对象 核心原理如果使用的是基本类型响应式依赖。

3、Vue3 中响应式核心方法就是 reactive 和 effect ， 其中 reactive 方法是负责将数据变成响应式， effect 方法的作用是根据数据变化去更新视图或调用函数，与 react 中的 useEffect 有点类似~其大概用法如下。

4、当一个vue实例加载时，会进行初始化，将他的配置项options和mixins的内容合并，以options为主，而在初始化data时，会对data对象进行数据劫持，并做代理，通过Objectdefinproperty劫持数据后vue会查找当前属性有无依赖项既被。

5、vue响应式基本原理是基于ObjectdefinePropertyobj，prop，descriptor，descriptor里面可以定义get和set方法，可以在获取属性值事触发get方法可以收集依赖，设置属性值时触发set方法更新依赖Vue最独特的特性之一，是其非。

6、Vue 响应式原理的核心是通过使用 ObjectdefineProperty 函数来劫持对象的属性来实现的在 Vue 中，我们可以将数据绑定到视图上，这意味着当数据发生变化时，视图会自动更新这种双向绑定的机制使得编写复杂的应用程序变得更加容易 Vue。

7、Vue响应式原理核心是 数据劫持，采用 ES5 的 objectdefineproperty 的 getter 和 setter 方法从一个例子出发首先，在Vue初始化阶段，通过 observer 对 data 中的属性进行递归的劫持，包括 namejob_ undergoab等。

8、当变量发生改变的同时， Vue 能在第一时间知道，并且对视图做出相应的改变操作而这把钥匙就是 ObjectdefineProperty 尚硅谷Vue源码解析之数据响应式原理 ObjectdefineProperty MDN。

9、有handler 和 target，说明mobx本身也是用了代理模式，同时加上Decorator函数，在这里就相当于把proxyObj使用装饰器的方式来实现，Proxy + Decorator 就是mobx的核心原理啦~vue响应式数据实现VUE的双向绑定涉及到模板编译，响应式数据，订阅者。

10、手把手教你搓Vue响应式原理二深度监测对象全部属性 手把手教你搓Vue响应式原理三observe 以及 ob 手把手教你搓Vue响应式原理四 数组的响应式处理 之前已经将数据劫持已经全部完成了那么，接。

11、Vue通过设定对象属性的 settergetter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个 观察者Watcher ，在数据变更的时候通知 订阅者Dep 更新视图核心APIobserver 数据劫持 劫持对象的。

12、vue2中ObjectdefineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理我们知道，会改变数组本身的方法只有7个sort， push， pop， slice， splice， shift， unshift，所以可以通过重写这些方法来达到数组响应式 解。

13、因此接下去我们执行以下4个步骤，实现数据的双向绑定深入响应式原理 剖析Vue原理实现双向绑定MVVM 响应式系统的基本原理js JavaScript实现MVVM之我就是想监测一个普通对象的变化。

14、响应式原理 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染思考 get函数。

15、vue30中的响应式原理是基于proxy做的，而使用proxy的前提是，我们要代理的是对象而不是基本类型数据如果我们用如下方式定义一个响应式的数据，count的改变是无法变监听拦截到的这时候，就需要ref来先讲基本类型包装成。

16、2不能监听数组的变化 vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的pushpopshiftunshiftsplicesortreverse七个方法，其他数组方法及数组的。

17、这次给大家带来怎么实现Vue数据响应式，实现Vue数据响应式的注意事项有哪些，下面就是实战案例，一起来看一下前言Vue的数据响应主要是依赖了ObjectdefineProperty，那么整个过程是怎么样的呢以我们自己的想法来走Vue的道路。