vue的响应式都用它来实现，js中强大的Object.defineProperty()方法_vue object.defineproperty实现响应式

作者：AllinToyou | 2024-03-18 00:44:09

踩

vue object.defineproperty实现响应式

今天vue项目做完，部署到了nginx中，闲暇时间，回看项目，对vue的响应式的实现产生了好奇，于是看了vue的源码和一些大牛们对vue源码的解读，大致初略的了解了vue响应式的是实现原理

1.Vue中修改数据，Vue内部是如何监听message数据的变化的

Object.defineProperty() -> 监听对象属性的改变

2.当数据发生改变，Vue是如何知道要通知哪些数据，界面发生刷新

发布订阅模式

响应式原理：
点击按钮，修改person对象中age属性的改变，触发了defineProperty()中的set()方法，从而把html页面修改了

<body>
		<button id="btn">111</button>
		 <p id="output">24</p>
	</body>
1
2
3
4

var person={name: "xiaojiayu", age: 24,gender: "man"}

var output=document.getElementById('output')
document.getElementById("btn").onclick=function(){
	person.age=30
}

Object.keys(person).forEach(key =>{
	let value = person[key]
	
	Object.defineProperty(person,key,{
		set(newValue){    //每当为person.xxx="xxx" 设置新值时，都会调用
			console.log('监听到'+ key + '的改变，新的值为'+newValue)
//此处可以监听到person.xxx属性改变时候的新值
//那么此时谁正在使用该属性的值，我们就可以告诉它，此时需要改变为新值了
//如何知道页面中谁在用person.xxx的值？解析html代码，获取到哪些人有用这个属性值

            output.innerHTML=newValue
			value=newValue
	},
		get(){   //每当使用person.xxx的时候，都会调用该函数
			console.log('有人来获取'+key+'对应的值了')
			return value
		}
		
	})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

有关Object.defineProperty()的详细用法，个人推荐这篇博客
https://www.jb51.net/article/143455.htm

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/259145