本篇文章带大家学习Vue，深入了解Vue中响应式原理，希望对大家有所帮助！
废话不多说，直接进入正题，响应式在日常开发中的应用是很常见的，这里举个简单的例子：
(资料图)
let a=3let b=a*10console.log(b)//30a=4console.log(b)//40
登录后复制这时候我们想让b=4*10，这样显然是不行的，即使我们在前面加上个var也只会发生变量提升，我们所给的值并不会提升。
而这个时候，响应式的作用就体现出来了：
import { reactive } from "vue"let state = reactive({ a: 3 })let b = computed(() => state.a * 10)console.log(b.value) // 30state.a = 4console.log(b.value) // 40登录后复制只需要一个简单的响应式API便可实现跟踪变化的效果。【相关推荐：vuejs视频教程、web前端开发】
分析一下reactive
事实上，Vue3的reactive的本质上就是一个发布订阅模式
通过创建依赖图来跟踪数据的依赖关系。依赖图是一个图形，它描述了哪些数据是依赖于哪些数据的。当数据发生变化时，Vue 3 的 reactive系统会自动触发视图的更新。这是因为它在依赖图中跟踪了数据变化，并通过将其与视图的更新关联起来来实现的
这里我列出尤大在Vue Master里演示的代码做个简单的示例：
class Dep{ constructor(value){ this.subscribers=new Set() this._value=value } get value(){ this.depend() return this._value } set value(newValue){ this._value=newValue this.notify() } depend(){ if(activeEffect){ this.subscribers.add(activeEffect) } } notify(){ this.subscribers.forEach(effect=>{ effect() }) }}登录后复制我们来分析一下这段代码：
当变量的值发生变化的时候，它便可以自动的通知所有的订阅者进行更新了
Vue2的Object.defineProperty
事实上，在Vue2时期，响应式的都是交给Object.defineProperty来实现的，但在Vue3当中切换成了Proxy，我们等下来结合实际代码来看原因；我们先来看看Vue2是如何实现的：
function reactive(raw){ Object.keys(raw).forEach(ket=>{ const dep=new Dep() let value=raw[key] Object.definProperty(raw,key,{ get(){ dep.depend() return value }, //当属性发生 set(newValue){ value=newValue dep.notify() } }) }) //这时候返回的原始对象已经具有响应性 return raw}登录后复制这样一个简单的响应式API就实现了
但这里缺点也就很明显了：在 Vue 2.x 中，被传入的对象会直接被 Vue.observable变更而在Vue3当中，则是会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的
这就导致了：
当然，这个属于历史局限了，当时ES5也就只能选择Object.definProperty，但在了ES6版本，便多了Proxy，这时候Vue的响应式便得到了升级
Vue3的Proxy
Vue3采用Proxy来监控数据的变化，相较于Vue2来说，不仅解决了上述的问题，还有这些优势：
让我们来看看实际代码是什么样子的：
const reactiveHandles={ get(target,key,receiver){ const dep=getDep(target,key) dep.depend() return Reflect.get(target,key,receiver) }, set(target,key,value,receiver){ const dep=getDep(target,key) const result=Reflect.set(target,key,value,receiver) dep.notify() return result }}登录后复制通过对对象进行收集依赖来实现响应式的方式也便是Vue3响应式的精髓
ref
在官方文档有句话：reactive()的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制，而reactive的限制便是：
而这个时候就需要ref来登场了，ref便是针对基本数据类型而诞生的，弥补了reactive的缺陷，简单的来说，ref更加适合简单的单个可变值(不过实际开发大多数时候都是ref一把梭哈哈哈
这里顺便提一下，响应式语法糖的提案被取消了还是蛮可惜的
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是一文详解Vue中响应式原理的详细内容，更多请关注php中文网其它相关文章！
