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

最新推荐文章于 2022-04-21 15:27:37 发布

codingWeb

最新推荐文章于 2022-04-21 15:27:37 发布

阅读量290

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/fesfsefgs/article/details/104186640

版权

前端专栏收录该内容

116 篇文章 8 订阅

订阅专栏

今天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>

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
		}
		
	})
})