vue中的双向数据绑定的实现（数据劫持，结合发布者---订阅者模式）

代码简单原理的实现：<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge&q

DLGDark

4189人浏览 · 2018-03-13 09:52:32

DLGDark · 2018-03-13 09:52:32 发布

代码简单原理的实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
</head>
<body>
	<input type="text" id="userName">
	<br/>
	<span id="uName"></span>

	<script type="text/javascript">

		var obj={
			pwd:"123456"
		};
		Object.defineProperty(obj,"userName",{
			get: function(){
				console.log("get init");
			},
			set: function(val){
				console.log("set init");
				document.getElementById("uName").innerText=val;
				document.getElementById("userName").value=val;
			}
		});

		document.getElementById("userName").addEventListener("keyup",function(){
			obj.userName=event.target.value;
		});

	</script>
</body>
</html>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^