vue中双向绑定

最新推荐文章于 2025-06-04 14:47:51 发布

原创最新推荐文章于 2025-06-04 14:47:51 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #双向绑定 #Object.defineproperty

学习笔记专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了双向绑定的概念，包括模型到视图与视图到模型的双向数据同步机制。详细解析了Vue.js实现双向绑定的技术原理，即通过数据劫持与发布者-订阅者模式，利用Object.defineProperty进行属性的setter和getter劫持，实现在数据变动时通知订阅者并触发相应回调。同时解释了为何Vue不支持IE8及以下浏览器的原因。

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

什么是双向绑定？
1.当一个对象（或变量）的属性改变，那么调用这个属性的地方显示也应该改变，模型到视图（model => view）
2.当调用属性的这个地方改变了这个属性（通常是一个表单元素），那么这个对象（或变量）的属性也会改为最新的值，即视图到模型（view => model）

vue双向绑定原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

数据劫持
| 在这里插入图片描述

用Object.defineProperty（）实例：

在这里插入代码片<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="model" />
		<div id="modelText"></div>
	</body>
	<script>
//		var user = {};
//		var defaultName = "第一次";
		
		
		//初次探索
//		document.getElementById("model").value = defaultName;
//		document.getElementById("modelText").textContent = defaultName;
//			Object.defineProperty(user,"name",{
//				get:function(){
//					console.log("获取值")
//					return defaultName;
//				},
//				set:function(newValue){
//					console.log("设置值")
//					defaultNname = newValue;
//					document.getElementById("model").value = newValue;
//					document.getElementById("modelText").textContent = newValue;
//				 }
//			})
//			setTimeout(()=>{
//				user.name = "aaaa";
//			},3000)

//      加强版
//       var model = document.getElementById("model");
//       var modelText = document.getElementById("modelText");
//       
//       model.value = defaultName;
//       modelText.textContent = defaultName;
//       
//       Object.defineProperty(user,"name",{
//       	get:function(){
//					console.log("获取值")
//					return defaultName;
//				},
//       	set:function(newValue){
//       		console.log("设置值")
//       		defaultName = newValue;
//       		model.value = newValue;
//       		modelText.textContent = newValue;
//       	}
//       })
//       model.addEventListener("keyup",function(){
//       	user.name = this.value;
//       	console.log("正在输入")
//       },false)    
	</script>
</html>

为什么vue不支持ie8及以下

  vue数据数据双向绑定原理是：
           ①数据劫持 结合发布者-订阅者模式
           ②object.definepropery()是es6新特性而ie8及以下是es3所以不兼容