数据代理(响应式原理的一部分)_数据代理 {}.keys-CSDN博客

本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/125089139

Object.defineProperty的对象以及对象劫持有以下优势：
1.无需显式调用，如Vue2中Object.defineProperty的对象以及对象劫持+发布订阅模式，
只要数据发生变化直接通知变化，并驱动视图更新。
2.可在set函数中精确得知数据变化并驱动试图更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 数据代理的demo（通过一个对象代理对另一个对象属性的操作） -->
	</head>
	<body>
		<div id="app">
			我们是web2208班
		</div>

		<script type="text/javascript">
			/* var a = {age:20}
					  var b = {height:30}
					  Object.defineProperty(b,'age',{
						  get(){
							  return a.age
						  },
						  set(val){
							  a.age = val
						  }
					  }) */

			/*  var data = {
				 msg:'张三',
				 age:40
			  }
			  
			    var vm = {}
			  			  Object.defineProperty(vm,'msg',{
			  				  enumerable:true,
			  				  configurable:true,
			  				  get(){
			  					  return data.msg
			  				  },
			  				  set(newval){
			  					  data.msg = newval
			  					  document.querySelector('#app').textContent = newval
			  				  }
			  			  })
			  			  
			  			  vm.msg="Hello 响应式原理" */


			let data = {
				msg: 'Hello Vue',
				count: 0
			}
			let vm = {}

			function defineProperies(data) {
				Object.keys(data).forEach(key => {
					Object.defineProperty(vm, key, {
						enumerable: true,
						configurable: true,
						get() {
							return data[key]
						},
						set(newval) {
							data[key] = newval
							document.querySelector('#app').textContent = newval
						}
					})
				})
			}
			defineProperies(data)
			vm.count = "111111";