本文主要为大家介绍Vue响应式系统的原理，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
Vue Vue响应式系统的基本原理1。查看Object.defineProperty 2的用法。实战1。使用Object.defineProperty监视人员的年龄属性3。数据代理4。在虚拟环境中实施响应式系统的思路综述
1.数据代理在1。Vue:
2.2中数据代理的好处。Vue:
3.基本原则：
4.在4.vue中实现响应的想法
vue响应式系统的基本原理
当我们使用vue时，我们可以操纵数据来影响相应的视图。那么这个机制是如何实现的呢？
你想想，是不是就好像我们对数据的操作被“某个人”在监控？一旦我们对数据进行了更改，“有人”就能感觉到并帮助我们更新视图。
那么这个“某人”是谁呢？其实很常见，就是我们基础里学过Object.defineProperty。用它处理数据可以实现数据读取时“读取”的回调功能；当数据被写入时，回调函数“write”被执行。
接下来，我们将简单回顾一下这种方法的使用，然后通过几个实际例子带您了解这一原理。
1.回顾一下Object.defineProperty的用法
参数解释：
目标对象
Prop:要操作的目标对象的属性名。
描述符：描述符
传入对象返回值
描述符的一些属性，简单介绍几个属性。
可枚举，无论属性是否可枚举，默认为false。
可配置，属性是否可以修改或删除，默认为false。
可写，该属性是否可以修改，默认为false。
Get，获取属性的方法。
Set，设置属性的方法。
完整用法：
Object.defineProperty(对象，属性，描述符)
2.实战1：使用 Object.defineProperty 对 person的age属性 进行监听
踩坑
看看下面的代码。第一眼看上去，是不是感觉没什么不妥？
当有人读取人的年龄属性时，我返回人的年龄属性；当有人修改person的年龄属性时，我直接修改person.age的值
但是！男生女生们，运行之后，虽然没有错误，但是编译器还是不停疯狂地输出“@ @有人读取了年龄属性”。
这是为什么呢？想想吧。您可以在get函数中直接返回person.age。这算不算再看一遍人的年龄属性？这个时候程序就去一次又一次的执行age的get函数。
比如你要读取age，那么你告诉编译器我要输出person.age，好的，编译器查找person.age，发现它有get函数，于是执行get函数。此时，你以为你要得到它的值，但是get函数告诉编译器我要person.age，这样，就形成了一个无限循环！
那怎么解决呢？在get中不能直接返回person.age，那么如何获取这个属性的值呢？
答:可以用变量代替吗？
我把person.age的值放在变量ageNumber中，当我想读取它的时候，我会返回ageNumber的值；若要修改，请修改ageNumber的值；
不是避免在get和set函数中使用person.age直接访问吗？
正确代码
这时候效果就完成了，可以边看边修改边监控。
3.数据代理
数据代理是什么意思？
答：简单解释，就是通过一个对象代理对另一个对象中的属性进行操作(读/写)。
有点抽象，对吧？用下面几个小例子来解释一下。
当教师要查看或修改学生成绩时，可以直接对教师对象进行操作，而不是直接对学生对象进行操作。
也就是上面我要说明的是，学生对象中score属性的操作(读/写)是由教师对象来表示的。
4.vue中实现响应式思路
对vue2有一些基础知识的同学应该知道，vue中data() {}定义的所有数据都会挂载到vm对象上。然后我们通过这个对数据进行操作。数据名，对吧？
这是否等同于上面小例子中的场景？这是vm对象的操作(读/写),它充当您定义的数据对象中属性的代理。
再举一个例子，充分认识vue的响应式原理。
将数据对象中的所有属性交给vm对象进行代理(让vm控制数据对象中属性的(读/写)操作)。当数据改变时，相应的视图可以被更新。
摘要
1.数据代理在1。Vue:
vm对象用于代理数据对象中属性的操作(读/写)。
2.2中数据代理的好处。Vue:
在数据中操作数据更方便。
3.基本原则：
通过Object.defineProperty()将数据对象中的所有属性添加到vm中。
为添加到vm的每个属性指定一个getter/setter。
在getter/setter中操作(读/写)数据中的相应属性。
4.vue中实现响应式思路
不使用数据代理，直接将数据分配装载到虚拟机。
1.下图所示的方法是为数据对象设置get和set的通用方法。
2.当创建一个新的Vue时，用户传入的数据对象将直接挂载到Vue实例上。
然后监视Vue实例之上的数据对象(反应式处理)。
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。