vue数据双向绑定的原理

最新推荐文章于 2025-02-28 22:05:10 发布

11adaacc

最新推荐文章于 2025-02-28 22:05:10 发布

阅读量211

点赞数

分类专栏：例题

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113923661

版权

例题专栏收录该内容

65 篇文章

订阅专栏

本文深入探讨了Vue.js中实现双向数据绑定的技术细节，主要涉及Object.defineProperty()的使用，从单向数据绑定到双向数据绑定的实现过程。通过实例展示了如何监听并响应数据变化，以实时更新视图。同时，讲解了Vue内部如何借助发布者-订阅者模式进行数据劫持，确保数据和视图的同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue底层实现双向数据绑定的原理

01.Object.defineProperty()

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(obj, prop, desc)
obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符

02.单向数据绑定

数据变，视图变

<body>
	<h1 id="title"></h1>
	<span id="btn">点击</span>
<script>
let book = {};
let name = "123";
Object.defineProperty(book,"name",{
	set(value){
		name=value
		title.innerHTML=name;
		
	},
	get(value){
		return name
	}
})
let num=0;
btn.onclick=function(){
	book.name=num++;
	console.log(book.name)
}
</script>
</body>

在这里插入图片描述

03.双向数据绑定

视图变，数据变

<body>
	<h1 id="title"></h1>
	<span id="btn">点击</span>
	<input type="" name="" id="test" value="" />
<script>
let book = {};
let name = "123";
Object.defineProperty(book,"name",{
	set(value){
		name=value
		btn.innerHTML=name;
	},
	get(value){
		return name
	}
})
//通过oninput监听input的值变化
test.oninput=function(){
	book.name=this.value;//进入set
	console.log(name)//进入get
}
</script>
</body>