vue项目——双向数据绑定原理/Object.defineProperty()函数

程序员文章站 2022-07-12 22:02:35

...

1.Object.defineProperty()函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>

    <script>	

      var obj = {
        pwd:"123456"  // 2. 直接在这里给obj添加新属性
      };
      Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性 （Object.definePropert有拓展属性的能力）
        value:"Jack"
      });

		
    </script>

</body>
	
</html>

介绍一下Object.defineProperty()函数有拓展对象属性的能力。

在控制台中可看到两种方法都可以为 obj 对象添加属性

vue项目——双向数据绑定原理/Object.defineProperty()函数

2.input监听数据变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>

      document.getElementById("userName").addEventListener("keyup",function(event){
         document.getElementById("uName").innerText = event.target.value;
	  })
		
    </script>
</body>
	
</html>

在input输入框中输入时可看到： vue项目——双向数据绑定原理/Object.defineProperty()函数

这个可以通过input监听数据变化，但是需要添加keyup事件去监听，要不然就不知道用户发生了改变

3.vue双向数据绑定关键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>

      var obj = {
         pwd:"123456"   // 2. 直接在这里给obj添加新属性
	  };

	  Object.defineProperty(obj,"userName",{  // 1. 给obj拓展一个新的属性 
            get:function(){
              console.log("get init")
	        },
            set:function(){
              console.log("set init")
            }
	  });	

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

可看到在下图中，为obj的userName属性重新赋值的时候，触发了set init；获取obj的userName属性的时候

触发了set init。

vue项目——双向数据绑定原理/Object.defineProperty()函数

在代码中再更改一些：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Vue双向数据绑定原理</title>
</head>
<body>
    <input type="text" id="userName">
	<br>  
    <span id="uName"></span>
	<script>

        var obj = {
          pwd:"123456"  // 2. 直接在这里给obj添加新属性
        };
        Object.defineProperty(obj,"userName",{ // 1. 给obj拓展一个新的属性 
         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(event){
		  obj.userName = event.target.value;
	    })
		
	</script>
</body>
</html>

在控制台中更改userName属性后，input上的值和span中的值同时出现了

vue项目——双向数据绑定原理/Object.defineProperty()函数