这篇文章主要介绍“Vue中响应式原理是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中响应式原理是什么”文章能帮助大家解决问题。 响应式在日常开发中的应用是很常见的，这里举个简单的例子：
leta=3 letb=a*10 console.log(b)//30 a=4 console.log(b)//40
这时候我们想让b=4*10，这样显然是不行的，即使我们在前面加上个var也只会发生变量提升，我们所给的值并不会提升。而这个时候，响应式的作用就体现出来了：
import{reactive}from'vue'
letstate=reactive({a:3})
letb=computed(()=>state.a*10)
console.log(b.value)//30
state.a=4
console.log(b.value)//40
只需要一个简单的响应式API便可实现跟踪变化的效果。事实上，Vue3的reactive的本质上就是一个发布订阅模式通过创建依赖图来跟踪数据的依赖关系。依赖图是一个图形，它描述了哪些数据是依赖于哪些数据的。当数据发生变化时，Vue 3 的 reactive 系统会自动触发视图的更新。这是因为它在依赖图中跟踪了数据变化，并通过将其与视图的更新关联起来来实现的这里我列出尤大在Vue Master里演示的代码做个简单的示例：
classDep{
constructor(value){
this.subscribers=newSet()
this._value=value
}
getvalue(){
this.depend()
returnthis._value
}
setvalue(newValue){
this._value=newValue
this.notify()
}
depend(){
if(activeEffect){
this.subscribers.add(activeEffect)
}
}
notify(){
this.subscribers.forEach(effect=>{
effect()
})
}
}
我们来分析一下这段代码：定义一个subscribe属性，作为一个订阅者列表，用来存储所有的订阅者信息depend函数用来管理依赖关系，即该订阅者所依赖的该变量notify函数便是作为通知所有订阅者该变量的值已经发生变化当变量的值发生变化的时候，它便可以自动的通知所有的订阅者进行更新了事实上，在Vue2时期，响应式的都是交给Object.defineProperty来实现的，但在Vue3当中切换成了Proxy，我们等下来结合实际代码来看原因；我们先来看看Vue2是如何实现的：
functionreactive(raw){
Object.keys(raw).forEach(ket=>{
constdep=newDep()
letvalue=raw[key]
Object.definProperty(raw,key,{
get(){
dep.depend()
returnvalue
},
//当属性发生
set(newValue){
value=newValue
dep.notify()
}
})
})
//这时候返回的原始对象已经具有响应性
returnraw
}
这样一个简单的响应式API就实现了但这里缺点也就很明显了：在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更 而在Vue3当中，则是会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的这就导免费云主机域名致了：当我们添加或者删除对象的属性时，Vue2的响应式是无法检测的，由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的无法检测数组的下标和长度的变化当然，这个属于历史局限了，当时ES5也就只能选择Object.definProperty，但在了ES6版本，便多了Proxy，这时候Vue的响应式便得到了升级Vue3采用Proxy来监控数据的变化，相较于Vue2来说，不仅解决了上述的问题，还有这些优势：无需再使用vue.$set来触发响应式，这让代码看上去能过更加简介全方位的数组变化检测，消除Vue2中无效边界情况减少了Vue3中书写响应式的代码量，这让我们的开发更加方便让我们来看看实际代码是什么样子的：
constreactiveHandles={
get(target,key,receiver){
constdep=getDep(target,key)
dep.depend()
returnReflect.get(target,key,receiver)
},
set(target,key,value,receiver){
constdep=getDep(target,key)
constresult=Reflect.set(target,key,value,receiver)
dep.notify()
returnresult
}
}
通过对对象进行收集依赖来实现响应式的方式也便是Vue3响应式的精髓在官方文档有句话：reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制，而reactive的限制便是：只能处理可被观测的数据结构，如数组和对象；而不可观测的数据结构，如原始数据类型就无法被其监测只能处理定义在它所在组件的数据，不能处理全局变量而这个时候就需要ref来登场了，ref便是针对基本数据类型而诞生的，弥补了reactive的缺陷，简单的来说，ref更加适合简单的单个可变值(不过实际开发大多数时候都是ref一把梭哈哈哈。关于“Vue中响应式原理是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。
这篇文章主要介绍“vue3.0使用axios报错怎么解决”，在日常操作中，相信很多人在vue3.0使用axios报错怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3.0使用axios报错怎么解决”的疑惑有所帮助！接…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
