提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

VueJS方法响应 实现 强大 object defineProperty
2023-09-11 14:22:30 时间

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

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

相关文章