vue2.0响应式原理,vue.js响应式原理
应用会对用户的操作进行反馈，这叫做响应性。数据变化会实时改变UI，这叫做数据响应性。当Vue实例中的数据被修改时，视图会被重新渲染，这叫做Vue的数据响应性。
目录
什么是响应式？如何实现数据响应？对象属性拦截？一般劫持方案概述
响应式是什么
简而言之，数据改变，页面改变。
如何实现数据响应式
Javascript中实现数据响应一般有两种方案，分别对应vue2.x和vue3.x使用的方式。它们是：
属性拦截(vue2.x)
对象.定义属性
对象整体代理(vue3.x)
代理人
其中，对象属性拦截也有同样的道理。
实现对象属性拦截
文字对象定义
let data={
姓名：小蓝同学
}
object . define属性对象定义
让数据={}
Object.defineProperty(data， name ，{
//访问name属性执行此方法，返回值为获取的值。
get(){
Console.log(“获得了名称属性”)
返回“小蓝同学”
},
//设置新值将执行此方法。newVal是设置的新值
set(newVal){
Console.log(name name属性已设置为新值)
console.log(newVal)
}
})
我们可以通过data.name获取值，也可以通过data.name=同学小昭赋值
存在问题演示
最后，获得名称值不变。
解决办法
我们可以通过一个中间变量_name来传递get函数和set函数之间的联动。
让数据={}
Let _name=小蓝同学
Object.defineProperty(data， name ，{
//访问name属性执行此方法，返回值为获取的值。
get(){
Console.log(“获得了名称属性”)
返回名称
},
//设置新值将执行此方法。newVal是设置的新值
set(newVal){
Console.log(name name属性已设置为新值)
console.log(newVal)
_name=newVal
}
})
结果验证
通用的劫持方案
想想吧。如果有一个对象的数据已经被声明了，那么如何将每个属性劫持成setter和getter的形式呢？
下面是一个已经申报的数据。
let data={
姓名：小蓝同学，
年龄：18，
身高：180
}
我们希望其中的所有属性都是响应性的，get和set方法中每个属性值的操作都是相连的。
let data={
姓名：小蓝同学，
年龄：18，
身高：180
}
//遍历每个属性
Object.keys(数据)。forEach((key)={
//键属性名
//数据[键]属性值
defineReactive(数据，键，数据[键])
})
//响应转换方法
函数定义有效(数据，键，值){
Object.defineProperty(数据，键，{
get(){
返回值
},
set(newVal){
值=新值
}
})
}
描述：这个地方实际上使用了闭包的特性。看下图。每次执行defineReactive函数，都会形成一个独立的函数作用域。由于闭包的原因，传入的值将驻留在内存中，因此每个defineReactive函数中的值将用作各自set和get函数的局部变量。
总结
所谓响应式拦截，其实就是拦截对象属性的访问和设置。在Javascript中，有两种方法可以通过插入我们想要做的事情来实现响应拦截。Object.defineProperty方法和proxy对象Proxy返回到vue2.x中的数据配置项，只要放入data中的数据，不管层次结构有多深，不管你最终是否会用到这个数据，都会进行递归响应处理，所以要求我们在没有必要的情况下尽量不要添加过多的冗余数据。在数据方面，我们需要知道vue3.x，它解决了2中数据响应处理无端的性能消耗。使用手段是代理劫持整个对象使其惰性化(只有在使用后，才会以有反应的方式转化)。关于Vue对数据响应性原理的深入解释的这篇文章就介绍到这里。有关Vue数据响应能力的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。